DOM事件

最新推荐文章于 2022-06-20 19:58:03 发布

可芭乐

最新推荐文章于 2022-06-20 19:58:03 发布

阅读量363

点赞数

分类专栏： JavaScript基础文章标签： javascript dom

本文链接：https://blog.csdn.net/a839371666/article/details/66478157

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

理解事件流
事件流——描述的是从页面中接受事件的顺序
ＩＥ浏览器——事件冒泡流
ｎａｔｅｓｃｒｉｐｔ浏览器——事件捕获流
事件冒泡：就是事件最开始由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播至最不具体的节点（文档）
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
使用事件处理程序
- html事件处理程序
将javascript程序写在html程序中间
缺点：html和javascript代码紧密的耦合在一起javascript与html要同时修改
- ＤＯＭ０级事件处理程序（可以添加多个事件）
较传统的方式：把一个函数赋值给一个事件的处理程序属性（用得比较多简单跨浏览器的优势）
用javascript方法删除onclick属性

btn.onclick = null

DOM2级事件处理程序（可以添加多个事件）在IE浏览器不兼容
DOM2级书剑定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener() removeEventListner()
当用addEventListener()添加的事件只能用removeEventListner()删除
接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值

btn.addEventListener('click', show, false);//添加事件
btn.removeEventListener('click', show, false);//删除事件

当点击时调用show函数，冒泡流，所以要用false，兼容各种浏览器

IE事件处理程序（只支持事件冒泡）
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

btn.attachEvent('onclick',show);//添加事件
btn.detachEvent('onclick',show);//删除事件

兼容写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id="btn">
    </div>
<script type="text/javascript">
function show(){
    alert('hello');
}

var Btn = document.getElementById('btn');

    var eventUtil = {
        //添加句柄
        addHandler : function(element, type, handler){
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on'+type, handler);
            } else{
                element['on'+type] = handler;
            }
        },
        //删除句柄
        removeHandler : function(element, type, handler){
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false)
            } else if (element.detachEvent) {
                element.detachEvent('on'+type, handler);
            } else{
                element['on'+type] = null;
            }
        }
    }
    eventUtil.addHandler(Btn, 'click', show);
</script>
</body>
</html>

事件对象
在触发DOM上的事件时都会产生一个对象
事件对象event

DOM中的事件对象
（1）type属性用于获取事件类型
（2）target属性用于获取事件目标
（3）stopPropagation()方法用于阻止事件冒泡
（4）preventDefault()方法阻止事件的默认行为
IE中的事件对象
（1）type属性用于获取事件类型
（2）srcElement属性用于获取事件目标
在IE8及之前的版本，使用的是window.event所以一般在之前可以使用event = event ||window.event
（3）cancelBubble属性用于阻止事件冒泡
设置为true表示阻止冒泡设置为false表示不阻止冒泡
（4）returnValue属性阻止事件的默认行为
设置为false表示阻止事件的默认行为
不同的事件类型
鼠标事件：
鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离
onmousedown：在用户按下任何鼠标按钮时触发
onmousemove：当鼠标指针在元素内部移动时重复地触发
onmouseup：当用户释放鼠标按钮时触发
键盘事件：
keyDown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keyPress：当用户按下键盘上的字符键时触发
event对象的keyCoden属性用于得到键盘对应键的键码值

抽奖系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript" src="chou.js"></script>
</head>
<body>
    <div id="title" class="title">开始抽奖啦！</div>
    <div class="btns">
        <span id="play">开 始</span>
        <span id="stop">结 束</span>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
.title {
    width: 400px;
    height: 70px;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #f00;
}

.btns {
    width: 190px;
    height: 30px;
    margin: 0 auto;
}

.btns span {
    display: block;
    float: left;
    width: 80px;
    height: 25px;
    line-height: 27px;
    background: #036;
    border: 1px solid #eee;
    border-radius: 7px;
    margin-right: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-family: "微软雅黑";
    cursor: pointer;
}

var date = ['1','2','3','4','5','6','7','8','9','10','11','12'];
    timer = null;
    flag = true;

window.onload = function(){

    var play = document.getElementById('play');
    var stop = document.getElementById('stop');

    //开始抽奖
    play.onclick = playFun;
    stop.onclick = stopFun;

    //键盘事件
    document.onkeyup = function(event){
        event = event ||window.event;
        if (event.keyCode == 13) {
            if (flag) {
                playFun();
                flag = false;
            } else {
                stopFun();
                flag = true;
            }
        };
    }
}

function playFun(){
    var play = document.getElementById('play');
    var that = this;
    var title = document.getElementById('title');
    clearInterval(timer);
    timer = setInterval(function(){
        var random = Math.floor(Math.random()*date.length);
        title.innerHTML = date[random];
    }, 50);
    play.style.background = '#999';
}

function stopFun(){
    clearInterval(timer);
    var play = document.getElementById('play');
    play.style.background = '#036';
}