JavaScriptDOM事件

事件

用户和浏览器之间的交互行为我们就称之为事件,比如：点击，移入/移出

给元素绑定事件

• 在JavaScript中所有的HTML标签都可以添加事件
• 当对应事件被触发时候就会自动执行function中的代码

元素.事件名称 = function(){};

事件示例

let oBtn = document.querySelector("button");
    oBtn.onclick = function () {
        alert("按钮被点击了");
    }

// 如果给元素添加了和系统同名的事件, 添加的事件不会覆盖系统添加的事件
let oA = document.querySelector("a");
oA.onclick = function () {
    alert("a标签被点击了");
    // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
    return false;
}

添加事件的三种方式

• 通过onxxx的方式来添加

// 由于是给属性赋值, 所以后赋值的会覆盖先赋值
oBtn.onclick = function () {
       alert("666"); // 不会弹出
   }
oBtn.onclick = function () {
    alert("777");
}

• 通过addEventListener方法添加

// 事件名称不需要添加on
// 后添加的不会覆盖先添加的
// 只支持最新的浏览器IE9及以上
oBtn.addEventListener("click", function () {
        alert("666");
    });
oBtn.addEventListener("click", function () {
    alert("777");
});

• 通过attachEvent方法添加

// 事件名称必须加上on
// 后添加的不会覆盖先添加的
// 只支持低版本的浏览器
oBtn.attachEvent("onclick", function () {
       alert("666");
   });
oBtn.attachEvent("onclick", function () {
    alert("777");
});

• 兼容性写法

addEvent(oBtn, "click", function () {
       alert("666");
})
addEvent(oBtn, "click", function () {
    alert("777");
})
function addEvent(ele, name, fn) {
    if(ele.attachEvent){
        ele.attachEvent("on"+name, fn);
    }else{
        ele.addEventListener(name, fn);
    }
}

事件对象

事件对象就是一个系统自动创建的一个对象，当注册的事件被触发的时候, 系统就会自动创建事件对象

事件对象的注意点

• 在高级版本的浏览器中, 会自动将事件对象传递给回到函数
• 在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
• 在低级版本的浏览器中, 需要通过window.event来获取事件对象

let oBtn = document.getElementById("btn");
oBtn.onclick = function (event) {
       // 兼容性的写法
       event = event || window.event;
       console.log(event);
       console.log(typeof event);
}

let oA = document.querySelector("a");
oA.onclick = function (event) {
        // 兼容性的写法
        event = event || window.event;

        alert("666");
        // 阻止默认行为

        return false; // 企业开发推荐

        // 注意点: preventDefault方法只支持高级版本的浏览器
        // event.preventDefault();
        // IE9以下的浏览器
        // event.returnValue = false;
}

事件冒泡和捕获

事件的三个阶段

• 捕获阶段(从外向内的传递事件)
• 当前目标阶段(执行回调函数)
• 冒泡的阶段(从内向外的传递事件)

注意点

三个阶段只有两个会被同时执行，要么捕获和当前, 要么当前和冒泡

设置事件捕获或冒泡

// 通过addEventListener方法, 这个方法接收三个参数
// 第一个参数: 事件的名称
// 第二个参数: 回调函数
// 第三个参数: false冒泡  / true 捕获
oFDiv.addEventListener("click", function () {
    console.log("father");
}, false);
oSDiv.addEventListener("click", function () {
    console.log("son");
}, false);

// onXxx的属性, 不接收任何参数, 所以默认就是冒泡
// attachEvent方法, 只能接收两个参数, 所以默认就是冒泡

事件冒泡应用

/*
<ul>
    <li class="selected">我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
*/
let oUl = document.querySelector("ul");
let oLi = document.querySelector(".selected");

oUl.onclick = function (event) {
    event = event || window.event;
    oLi.className = '';
    let item = event.target;
    item.className = 'selected';
    oLi = item;
};

阻止事件冒泡

oSDiv.onclick = function (event) {
    event = event || window.event;
    // 阻止事件冒泡兼容性写法
    if(event.cancelBubble){
        // 低级浏览器
        event.cancelBubble = true;
    }else{
        // event.stopPropagation() 只支持高级浏览器
        event.stopPropagation();
    }
    console.log("son");
}

移入移出事件区别

onmouseover和onmouseenter的区别

• onmouseover移入到子元素,父元素的移入事件也会被触发
• onmouseenter移入到子元素,父元素的移入事件不会被触发

onmouseout和onmouseleave的区别

• onmouseout移出到子元素,父元素的移入事件也会被触发
• onmouseleave移出到子元素,父元素的移入事件不会被触发

事件位置获取

• offsetX/offsetY：事件触发相对于当前元素自身的位置
• clientX/clientY：事件触发相对于浏览器可视区域（不包括滚动出去的范围）的位置
• pageX/pageY：事件触发相对于整个网页（包括滚动出去的范围）的位置
• screenX/screenY：事件触发相对于屏幕的位置

注意点

• clientX/clientY无论高级浏览器还是低级浏览器都支持
• pageX/pageY只有高级浏览器支持, 低级浏览器是不支持的(IE9以下)

定时器

在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器

重复执行的定时器

// 每隔1秒会执行一次函数
id = setInterval(function () {
    console.log("666");
}, 1000);

// 结束定时器
clearInterval(id);

只执行一次的定时器

// 3秒后执行一次函数
id = setTimeout(function () {
    console.log("666");
}, 3000);

// 结束定时器
clearTimeout(id);

表单事件

• 想要获取input中输入的内容，只能通过value属性获取
• 获取焦点 onfocus
• 失去焦点 onblur
• 内容改变 onchange，只有在表单失去焦点之后才能拿到
• 内容改变 oninput 实时获取内容（IE9及IE9以上）
• 如果通过JS代码给input设置数据，那么不会触发oninput事件
• 内容改变 onpropertychange 实时获取内容（IE9以下）
• 在JS中如果HTML标签的属性和取值一样，那么JS会返回true/false