事件

最新推荐文章于 2024-06-17 07:15:00 发布

wrang_hh

最新推荐文章于 2024-06-17 07:15:00 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/m0_37666988/article/details/88918953

版权

在这里插入图片描述

事件是javaScript和DOM之间交互的桥梁。

1.鼠标事件：
模拟画图工具

<style type="text/css">
        div{
            width:500px;
            height: 500px;
            border: 1px solid #cecece;

        }
        span{
            position: absolute;
            bottom: 0;
        }
    </style>

</head>
<body>
    <div>
        <span>
        </span>
    </div>
    <script type="text/javascript">
    var oDiv = document.getElementsByTagName("div")[0];
    var oSpan = oDiv.children[0];//获取子元素节点
    oDiv.onmousemove = function(e) {
        var evt = e||event;//这样写的目的是兼容各个浏览器
        var x = evt.clientX;
        var y = evt.clientY;
        oSpan.innerHTML = x +"," + y + "px";
    }
    oDiv.onmouseout = function() {
        oSpan.innerHTML = "";
    }
    </script>
</body>
</html>

2.键盘事件

onkeypress onkeydown onkeyup

  <script type="text/javascript">
        document.onkeypress = function() {
            //按下字符键时触发
            console.log("keypress");
        }
        document.onkeydown = function() {
            //按下任意键时触发
            console.log("keydown");
        }
        //alt ctrl shift这三个键按下的返回值是true
        document.onkeydown = function(e) {
            var evt = e||event;
            console.log(evt.altKey,evt.ctrlKey,evt.shiftKey);
             //判断是否按了某个键(keyCode是键码值)
            console.log(evt.keyCode);
        }

例子：发布内容

<style type="text/css">
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #cecece;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="text">
    <input type="button" value="发布">
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName("div")[0];
        var aInput = document.getElementsByTagName("input");

        //aInput[1]代表button按钮
        aInput[1].onclick = commentTxt;
        //每点击一次按钮执行一次函数
        function commentTxt() {
            oDiv.innerHTML += aInput[0].value;//往里追加内容
        }
    

        //点击ctrl或者回车键发布内容
        aInput[0].onkeydown = function(e) {
            var evt = e||event;
            if(evt.ctrlKey || evt.keyCode == 13) {
                commentTxt();
            }
        }
    </script>

3.事件流
在这里插入图片描述

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】冒泡是从下级元素到上级元素.

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。捕获是从上级元素到下级元素。

4.事件委托

事件委托的原理：

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

https://www.cnblogs.com/liugang-vip/p/5616484.html

   <title>Document</title> 
    <style type="text/css">
        li{
            margin: 10px;
            background: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementsByTagName("ul")[0];
        var aLi = document.getElementsByTagName("li");
        // for(var i = 0;i<aLi.length;i++) {
        //     aLi[i].onclick = function() {
        //         console.log(this.innerHTML);//单击li输出li标签之间的内容
    
        //     }
        // }

            //事件委托,利用父级元素oUl做事件处理
            oUl.onclick = function(e) {
                var evt = e||event;
                var _target = evt.target || evt.srcElement;//标准浏览器用ev.target，IE浏览器用event.srcElement,浏览器兼容问题
                if(_target.nodeName.toUpperCase() == "LI"){
                    console.log(_target.innerHTML);
                }
            }

        //此时后面添加的li没有onClick方法，单击上去不会输出log，此时就可以用事件委托机制
        for(var i = 0;i<5;i++) {
            var oLi = document.createElement("li");
            oLi.innerHTML = i;
            oUl.appendChild(oLi);
        }
        

    </script>
</body>
</html>

5.事件默认行为
在这里插入图片描述

在这里插入图片描述

6.DOM2级事件
0级DOM：只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。
分为2个：一是在标签内写onclick事件
　　　二是在JS写onlicke=function（）{}函数
　　　
DOM2: 可以给某一个元素的同一个行为绑定不同的方法。
在这里插入图片描述
监听事件的布尔值：
false=>让事件在冒泡传播时执行
true=>让事件在捕获阶段执行（非常少见）

<style type="text/css">
        #outer{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #inner{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
        <div id="outer">
                <div id="inner">
                </div>
            </div>
            <script type="text/javascript">
                var outer = document.getElementById("outer");
                var inner = document.getElementById("inner");

                // inner.addEventListener("click",baz,false);

                // //可以同时给一个元素添加多个事件
                // outer.addEventListener("click",foo,false);
                // outer.addEventListener("click",bar,false);
                // outer.removeEventListener("click",foo);//移除foo事件
                 function foo() {
                     console.log("outer1");
                 }
                 function bar() {
                     console.log("outer2");
                }
                 function baz() {
                     console.log("inner");
                 }
                
                //封装一个函数，解决兼容性问题
                function addEvent(obj,type,fun) {
                   if(obj.addEventListener) {//标准浏览器
                       obj.addEventListener(type,fun,false);
                   } else{//IE
                       obj.attachEvent("on",type,fun) ;
                   }
                }
                function removeEvent(obj,type,fun) {
                    if(obj.removeEventListener) {//标准浏览器
                       obj.removeEventListener(type,fun,false);
                   } else{//IE
                       obj.detachEvent("on",type,fun) ;
                   }
                }
                addEvent(outer,"click",foo);
                removeEvent(outer,"click",foo);
            </script>
</body>

wrang_hh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

事件是javaScript和DOM之间交互的桥梁。1.鼠标事件：模拟画图工具<style type="text/css"> div{ width:500px; height: 500px; border: 1px solid #cecece; } span...
复制链接

扫一扫

事件

“相关推荐”对你有帮助么？