javascript_事件委托_ZHOU125disorder_

event事件对象属性

通过type可以获取事件发生的类型

<body>
    <div style="width: 256px;height: 256px;background-color: #096;"></div>
    <script>
        var div=document.getElementsByTagName('div')[0];
        div.addEventListener("click",function(event){
            event = event || window.event;
            console.log(event.type);//click
            console.log(event.target);//<div style="width: 256px;height: 256px;background-color: #096;"></div>
            //target和this差不多
            // target属性      可返回事件的目标节点   这个事件是由谁来触发的

            // ie8及以下的兼容
            target = event.target || event.srcElement;
        },false)
    </script>
</body>

event鼠标事件属性

  • 鼠标位置
    <script>
        document.addEventListener("click",function(){
            // 参考对象:屏幕
            console.log(event.screenX);
            console.log(event.screenY);

            // 参考对象:浏览器窗口
            console.log(event.clientX);
            console.log(event.clientY);

            // 参考对象:文档
            console.log(event.pageX);
            console.log(event.pageY);
        },false);
    </script>

event键盘事件属性

通过键码值进行操作

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input回车添加</title>
</head>
<body>
    <input type="text">
    <button>添加</button>
    <ol></ol>

    <script>
        var ipt=document.getElementsByTagName("input")[0];
        var btn=document.getElementsByTagName("button")[0];
        var ol=document.getElementsByTagName("ol")[0];
        //普通的添加方法
        // btn.οnclick=function(){
        //     if(ipt.value==""){
        //         alert("请输入!!!");
        //         return false;
        //     }else{
        //         ol_li=document.createElement("li");
        //         ol.appendChild(ol_li);
        //         ol_li.innerHTML = ipt.value;
        //         ipt.value = "";
        //     }
        // }

        //获取键码值
        ipt.addEventListener("keydown",function(event){
            // console.log(event.keyCode);
            if(event.keyCode==13){

            if(ipt.value==""){
                alert("请输入!!!");
                return false;
            }else{
                ol_li=document.createElement("li");
                ol.appendChild(ol_li);
                ol_li.innerHTML = ipt.value;
                ipt.value = "";
            }
        }

        },false);


        btn.addEventListener("click",function(){

            if(ipt.value==""){
                alert("请输入!!!");
                return false;
            }else{
                ol_li=document.createElement("li");
                ol.appendChild(ol_li);
                ol_li.innerHTML = ipt.value;
                ipt.value = "";
            }

        },false);
    </script>
</body>
</html>

事件委托

    // 事件委托/事件代理
    // 官方解释:利用事件冒泡,指定一个事件处理程序,就可以管理某一类的所有事件
    // 人话:利用事件冒泡,通过event事件对象找到触发的元素
    //利用冒泡bai的原理,把事件加到父级上,触发执行效果

优化页面的效果

    <ol>
        <li>卡卡西</li>
        <li>卡卡西</li>
        <li>卡卡西</li>
        <li>卡卡西</li>
    </ol>

    <script>
        //普通写法
        // var ol=document.getElementsByTagName("ol")[0];
        // var ol_li=document.getElementsByTagName("li");
        // for(var i=0;i<ol_li.length;i++){
        //     ol_li[i].οnmοuseοver=function(){
        //         this.style.backgroundColor="#096";
        //     }
        //     ol_li[i].οnmοuseοut=function(){
        //         this.style.backgroundColor="";
        //     }
        // }

        //事件委托
        var ol=document.getElementsByTagName("ol")[0];
        var ol_li=ol.getElementsByTagName("li");
        ol.addEventListener("mouseover",function(event){
            event = event||window.event;
            target =event.target||event.srcElement;
            if(target.nodeName.toLowerCase() == "li"){
                target.style.backgroundColor="#096";
            }
        },false);

        ol.addEventListener("mouseout",function(event){
            event = event||window.event;
            target =event.target||event.srcElement;
            if(target.nodeName.toLowerCase() == "li"){
                target.style.backgroundColor="";
            }
        },false);
    </script>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页