js事件

一.鼠标事件：

1、click：点击

<button onclick="myClick()">鼠标单击</button>

2、dblclick：双击

<button ondblclick="myDBClick()">鼠标双击</button>

3、mousedown：鼠标按下

<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>

4、mouseup：鼠标抬起

<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>

5：mouseout：鼠标离开

<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>

7、mousemove：鼠标移动

<button onmousemove="myMouseMove()">鼠标移动</button>

8、mouseleave：鼠标离开

<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

二. 键盘事件：

1.keydown:按下键盘任意键时触发

2.keyup：按键抬起时触发

3.keypress：按键按下抬起时触发

框架/对象事件：

1.onabort：图像加载中断

2.onbeforeunload：改事件在即将离开页面时触发

3.onerror：在加载文档或图像发生错误

4.onhashchange:改事件在当前url的锚部分发生修改时触发

5.onpageshow：该事件在用户访问页面时触发

6.onpagehide：跳转页面时触发

7.onunload：退出页面时触发

html事件

1.load：文档加载完成

2.select：被选中的时候

3.change：内容被改变

4.focus：得到光标

5.resize：窗口尺寸变化

6.scroll：滚动条移动

代码演示：

<body onload="loaded()"> 
<div style="height: 3000px" ></div> 
<input type="text" id="name" onselect="mySelect(this.id)"> 
<input type="text" id="name2" onchange="myChange(this.id)"> 
<input type="text" id="name3" onfocus="myFocus()"> 
</body>

三 JS和JQUERY的区别

JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。

JQuery是一个JavaScript函数库。或者说是JavaScript。

事件对象

什么是事件对象

某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息，例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象

事件对象常见属性和方法

event.target : 返回触发事件的对象 , 点击哪个元素, 就返回哪个元素 this.target : 返回绑定事件的对象, 哪个元素绑定了这个点击事件, 就返回哪个元素.

<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(this);  // 返回的是ul
            console.log(e.target);  // 返回的是li
        })
    </script>
</body>

event.type : 获取事件类型, 比如 click

event.clientX : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系

event.clientY : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系

event.screenX : 获取当前鼠标在当前显示器上的横坐标,

event.screenY : 获取当前鼠标在当前显示器上的横坐标,

evt.button : 获取鼠标点击的哪个键

event.preventDefault() : 该方法阻止默认事件.

event.stopPropagation() : 阻止冒泡.

四事件的特性

事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

事件冒泡的代码案例

    <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>

事件捕获

当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。

事件捕获的代码案例

    <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>

第一篇不太完整的js