JS事件操作
2017-05-16 本文已影响0人
kangyiii
DOM 1级方式设置(4种)
- 通过onclick指定JS函数名称
<input type="text" name="userName" onclick="函数名称()">
function 函数名称(）{···};
- 在onclick中直接写入过程代码
<input type="text" name="userName" onclick="var a=10;alert(a);">
- JS中节点.onclick = 匿名函数
- JS中节点.onclick = 函数名称 注意是函数名称，不是调用函数
itnode.onclick = 有名函数名称;
function 函数名称(){···}
注意：以上DOM1级事件设置的4种具体表现形式，除了第1种(this代表window)，其他三种方式内部this都代表当前节点本身
DOM 2级事件设置
所谓DOM 2级事件设置可以更加灵活的任何可视节点添加动作事件。
- addEventListener：节点.addEventListener(动作名称，事件名称，事件流)
//addEventListener第一种使用方式
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){
this.style.backgroundColor ="pink";
});
//addEventListener第二种使用方式
dv.addEventListener('mouseover',f1);
function f1(){
dv.style.backgroundColor ="pink";
};
- removeEventListener：节点.removeEventListener(动作名称，事件名称，事件流)
如果是IE浏览器(IE9以下)的话最好使用attachEvent(事件类型，事件处理)和detachEvent(事件类型，事件处理)
事件流
多个彼此嵌套的元素，他们拥有相同的时间，最内部事件被触发后，外边多个元素的同类型时间会被触发，多个元素他们同类型时间同时执行的效果称为"事件流"
事件类型
注意：在addEventListener或者removeEventListener中最后一个参数如果为false（冒泡型，从内而外），为true（捕捉型，从外而内）
事件对象
事件对象，每个事件(包括鼠标，键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息，什么键子被触发执行，通过事件对象还可以阻止事件流产生，阻止浏览器默认动作。
-
获得事件对象
声明触发方法时参数evt，evt就是事件对象 -
获取鼠标的坐标信息
event.clientX/clientY （相对dom的坐标）
event.pageX/pageY （考虑滚动条）
event.screenX/screenY （相对屏幕坐标）
- 阻止事件流
event.stopPropagetion() //主流浏览器
event.cancelBubble = true //IE浏览器
冒泡型、捕捉型都可以进行阻止
- 阻止浏览器默认动作
事件对象.preventDefault() //主流浏览器
事件对象.returnValue=false //IE浏览器
return false //dom1级事件设置
- 获取被触发键盘键子信息
event.keyCode 获得键盘对应的键值码信息，返回的为ASC码
加载事件 onload
JS代码执行时如果涉及到html或者css时，需要让html和css执行后，在执行js代码，但通过加载事件可以实现JS代码写在html和css代码之前
具体设置：
//方式1（不推荐）
<body onload=“加载函数()”>
//方式2
//在js中书写
window.load=加载函数();
