js事件

第一种事件绑定

btn.onclick=function(){alert(“我是方式一”);}

第二种事件绑定

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。

语法

对象.addEventListener(事件名称,事件处理函数,布尔值)

btn.addEventListener(“click”,function(){alert(“我是方式二”)},false);

btn.addEventListener(“click”,函数名,false);//推荐:可以有多个函数

function 函数名(){alert(“我是方式二”)}

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

 

第三种事件绑定

<button onclick=”函数（）”>

function 函数(){alert(“我是方式三”)}//先开发经常使用

 

鼠标事件:单击:双击:移入:移开:某按键按下:移动:某个按键松开

Form表单事件:获得焦点:失去焦点:改变域:重置:提交

 

键盘事件:按下:松开:按下和松开

UI事件:

 

Event对象 :获取鼠标坐标

 

事件流和阻止冒泡:event.stopPropagation()非ie;event.cancelBubble=true;ie下

关闭默认右键/自定义菜单弹出

 

拖拽案例