DOM事件

一、鼠标事件

onclick             鼠标单击
ondblclick           鼠标双击
onmousedown           鼠标按下
onmouseup          鼠标抬起
onmouseover          鼠标悬浮
onmouseout            鼠标离开
onmousemove         鼠标移动
onmouseenter         鼠标进入
onmouseleave         鼠标离开

二、键盘事件

1、keydown()
keydown 事件会在键盘按下时触发。
2、keypress()
keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
3、keyup()
keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件。
4、keycode:获得键盘上对应的 ascII 码
  a、区分IE浏览器和W3C标准浏览器
document.onkeydown = function (event) {
    if (window.event){
    console.log("我是IE、或者chrome");
    console.log(event.keyCode); /!*IE chrome*!/
    }else{
    console.log("我是除chrome的W3C");
    console.log(event.which); /!*W3C*!/
    }
    };
  b、不区分大小写
 document.onkeydown = function (event) {
    console.log(event.keyCode);
    };
  c、区分大小写
document.onkeypress = function (event) {
    console.log(event.keyCode);
    };

三、HTML事件

onload           页面结束加载之后触发。
onunload       一旦页面已下载时触发(或者浏览器窗口已被关闭)。
onselect        在元素中文本被选中后触发。
onchange        在元素值被改变时运行的脚本。
onfocus         当元素获得焦点时运行的脚本。
onresize        当浏览器窗口被调整大小时触发。
onscroll         当元素滚动条被滚动时运行的脚本。

四、同一元素添加相同事件W3C和IE的区别

var btn3 = document.getElementById("btn3");
Dom0模型: 同一个元素,同类事件只能添加一个,如果添加多个,后面添加的会覆盖前面添加的
btn3.onclick = function () {
console.log("Hello");
};
btn3.onclick = function () {
console.log("Hello3")
};
Dom2模型:可以给同一个元素添加多个同类事件
btn3.addEventListener("click",function () {
alert("Hello1");
});
btn3.addEventListener("click",function () {
alert("Hello2");
});
不同浏览器的兼容写法
if (btn3.attachEvent){
/*IE低版本*
btn3.attachEvent("onclick",function () {
alert("IE Hello");
});
}else{
/*IE高版本 和W3C浏览器*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
});
}

五、事件冒泡和事件捕获

事件冒泡(false):从子元素到父元素
事件捕获(true):从父元素到子元素
stopPropagation:阻止事件冒泡
preventDefault(W3C)、returnValue(IE) 阻止默认事件
代码举例:
<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div4");
    },false);
</script>
 
posted on 2017-08-16 18:56  ★【金字塔】☆  阅读(125)  评论(0编辑  收藏  举报