JS学习十三：事件

一、事件处理程序

事件：就是用户或者浏览器执行的某种动作。

事件处理程序：就是响应事件的函数，事件处理程序的名字以"on"开头。

事件一般指鼠标、键盘事件。

定义事件的四种方式：

方式一：直接在HTML标签中，给与事件处理程序同名的属性赋值，值为函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1,#box2,#box3,#box4 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <!-- 方式一：alert() -->
        <div id="box1" onclick="alert('lllllllllll')">
        </div>
        <br />
        <!-- 方式二：自定义脚本函数 -->
        <div id="box2" onclick="func()">
        </div>
        <br />
        <!-- 方式三：通过元素节点.onclick = 函数 -->
        <!-- 方式三优点：html,css与js分离 -->
        <div id="box3">
        </div>
        <br />
        <!-- 方式四：通过监听元素节点事件：元素节点.addEventListener(事件类型，函数，false) -->
        <div id="box4">
        </div>
        <!-- 方式三重复定义相同的事件，后面的事件覆盖前面的 -->
        <!-- 方式四重复定义相同的事件，都会执行 -->
        
        <script type="text/javascript">
            function func() {
                alert("kwg kwg ")
            }
            var div3 = document.getElementById("box3")
            div3.onclick = function() {
                alert("aaaaaa")
            }
            var div4 = document.getElementById("box4")
//             div4.addEventListener("click", function () {
//                 alert("ccccc")
//             }, false)
            
            //方式三:清除事件
            div3.onclick = null
            function func4 () {
                            alert("ccccc")
                        }
            div4.addEventListener("click", func4, false)
            //方式四清除事件:要同定义事件的3个参数一样,函数名当然不能为匿名函数
            div4.removeEventListener("click", func4, false)
        </script>
    </body>
</html>

方式一及通常情况下，标签中的this代表window

方式二：标签中的this代表自身，脚本的函数中的形参self代表标签自身。但是此时，在函数中的this代表windows。

自定义函数，可以绑定元素本身，而不需要再去获取元素节点。

绑定：在元素的事件属性的自定义函数中，第一个参数传入this，形参；在定义函数的脚本中，第一个参数传入self，形参。

self就是元素节点自身，可以直接在函数中使用self去使用此元素，并操作它；而不需要再去获取元素节点，再来操作元素。

方式二中的this：不能在脚本中使用this去操作元素节点，this代表window

        <div id="box2" onclick="func(this)">
        </div>

        <script type="text/javascript">
            function func(self) {
                self.style.backgroundColor = "black"
                alert("kwg kwg ")
            }
        </script>

方式三、方式四：在脚本中的事件函数中，可以直接使用this，而无需通过参数传递。代表元素本身，当作元素节点使用。

在标签中，并没有定义事件处理函数，而是标签与事件处理函数分离；通过获取元素节点，添加事件，添加响应函数，实现的事件处理。

这种情况，脚本中的函数，不可能传入self；在这种方式中的this，不是代表window，而是代表这个元素节点自身。

因此方式三、方式四的脚本中，可以使用this去操作元素

        <div id="box3">
        </div>

            var div3 = document.getElementById("box3")
            div3.onclick = function() {
                this.style.backgroundColor = 'green'
                alert("aaaaaa")
            }

DOM0级事件处理：方式三的处理方式，标签与JS分离，前提要给标签一个id属性或其它能获取元素节点的方式。比较早期的处理方式。

DOM2级事件处理：方式四的处理方式，添加事件监听。

this的总结：

能否使用this，this代表什么
方式二定义的事件：在标签中使用，代表的是标签本身
方式二定义的事件：在函数体中直接使用，代表的是window。通过形参self将this传递过来，使用self，代表标签本身。但使用this，仍然表示的是窗口。
方式二：在标签中将this作为实参传递到函数中，在函数体中使用形参数self接收，此时函数体中的self代表的是标签本身，但this代表window
方式三、四：在事件函数中使用(方式三、四)，this代表标签本身。

二、焦点事件

焦点事件：针对input标签

聚焦：focus，离焦：blur

    <body style="height: 1000px;">
        <input type="text" name="" id="in" value=""/>
        
        <script type="text/javascript">
            var input = document.getElementById("in")
            input.addEventListener("focus", function() {
                console.log("聚焦事件")
            },false)
            input.addEventListener("blur", function() {
                console.log("离焦事件")
            }, false)            
        </script>
    </body>

三、鼠标单击、双击事件

单击、双击事件，只定义任何一个事件都没有问题。

但是，同时定义它位的时侯，双击的时侯，也会算作两次单击。

解决办法：用定时器区分单击、双击。

1.当单击的时侯，首先清除变量time：单击事件肯定得到响应，同时，然后设置它300毫秒的延时执行。

2.在延时执行期间，即300毫秒内，没有再次出现单击：则单击事件的函数，300毫秒超时，函数得到执行。最终表现为：单击事件。

3.如果300毫秒内，再次出现单击，属于双击事件，双击函数肯定得到执行。第二次单击函数也得到执行，首先会清除掉time，即清除掉第1次的单击事件；随即，生成第二次单击事件，在300秒后执行。但是由于在执行双击事件函数时，也清除了一次time，即第二次的单击事件也被清除。最终表现为：双击事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body style="height: 1000px;">
        <div id="in" style="width: 100px;height: 100px;background-color:red;"></div>
        
        <script type="text/javascript">
            var div = document.getElementById("in")
            var time
            div.addEventListener("click", function () {
                clearTimeout(time)
                time = setTimeout(function(){
                    console.log("单击")
                }, 300)
                // console.log("单击")
            }, false)
            div.addEventListener("dblclick", function () {
                clearTimeout(time)
                console.log("双击")
            },false)
        </script>
    </body>
</html>

四、鼠标事件：

mouseover鼠标进入，mouseout鼠标离开，mousedown鼠标按下，mouseup鼠标松开，mousemove鼠标移动

        <ul>
            <li>鼠标进入变红色</li>
            <li>鼠标离开变蓝色</li>
            <li>鼠标按下字体大2倍</li>
            <li>鼠标抬起小2倍</li>
        </ul>
        <script type="text/javascript">
            var lis = document.getElementsByTagName("li")
            for (var i =0; i < lis.length; i++) {
                lis[i].addEventListener("mouseover", function(){
                    this.style.backgroundColor = "red"
                }, false)
                lis[i].addEventListener("mouseout", function(){
                    this.style.backgroundColor = "blue"
                }, false)
                lis[i].addEventListener("mousedown", function(){
                    this.style.fontSize = parseInt(getComputedStyle(this, null).fontSize)* 2 + "px"
                }, false)
                lis[i].addEventListener("mouseup", function(){
                    this.style.fontSize = parseInt(getComputedStyle(this, null).fontSize) /2 + "px"
                }, false)
            }
            document.addEventListener("mousemove", function() {
                console.log("鼠标在移动")
            }, false)
        </script>

鼠标对象

        <div id="in" style="width:100px;height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementById("in")
            div.addEventListener("click", function(e){
                var event = e||window.event;
                console.log(event)
            }, false)
        </script>

鼠标对象的一些属性：

clientX：鼠标距离浏览器可视窗口左边的距离

clientY：鼠标距离浏览可视窗口顶部的距离

offsetX：...

pageX：鼠标距离页面的左边距离

pageY：

screenX：鼠标距离屏幕的左边距离。

五、键盘事件

KeyDown：用户摁下摁键时发生
KeyPress：用户摁下摁键，并且产生一个字符时发生
KeyUp：用户释放某一个摁键时触发

按下键盘会触发键盘事件，顺序依次为：keydown->keypress->keyup.

完整的 keypress 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发生 keydown 事件。当按钮松开时，发生keyup事件。

        <script type="text/javascript">

            document.addEventListener("keydown", function(e) {
                // window.event是ie浏览器,e是非ie浏览器
                var event = e || window.event
                console.log(event)
                console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey)
            }, false)
            
            document.addEventListener("keyup", function(e) {
                // window.event是ie浏览器,e是非ie浏览器
                var event = e || window.event
                console.log(event)
                console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey)
            }, false)

            document.addEventListener("keypress", function(e) {
                // window.event是ie浏览器,e是非ie浏览器
                var event = e || window.event
                console.log(event)
                console.log(event.key, event.keyCode, event.altKey, event.ctrlKey, event.shiftKey)
            }, false)
        </script>

键盘对象，常用的属性key，keyCode，shiftKey，ctrKey，altKey

六、事件流

事件流：是指从页面接受事件的顺序。

事件流有两种方式，一种事件捕获，一种事件冒泡。

事件捕获，是从最外层docuement，到内层的事件元素；而事件冒泡，是从内层的事件元素，到最外层的document。

为了解决以上矛盾，w3c做了规定，事件流分为3个阶段：事件捕获阶段、处于目标阶段，事件冒泡阶段。

比如，在定义延时函数的时侯，第三个参数：false为事件冒泡，true为事件获铺

假设有两个事件，点击body，改变body颜色为blue；点击div，只改变div颜色为orange。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            #box {
                 width:100px;
                 height:100px;
                 background-color:red;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="box"></div>
        <input type="text" name="in" id="put" />
        <a href="red.html" id="link">点我跳跳</a>
        
        <script type="text/javascript">
            document.body.onclick = function(){
                this.style.backgroundColor = "blue";
            }
            document.getElementById("box").onclick = function() {
                this.style.backgroundColor = "orange";
            }
        </script>
    </body>
</html>

由于事件流，点击div，必须也会触发body的onclick事件。

办法：点击div时侯，掐断冒泡行为发生。

点击div会冒泡，点击input会冒泡，点击a标签会冒泡，全部阻断：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            #box {
                 width:100px;
                 height:100px;
                 background-color:red;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="box"></div>
        <input type="text" name="in" id="put" />
        <a href="red.html" id="link">点我跳跳</a>
        
        <script type="text/javascript">
            document.body.onclick = function(){
                this.style.backgroundColor = "blue";
            }
            document.getElementById("box").onclick = function(e) {
                var ev = e || window.envent
                // 掐断冒泡
                ev.stopPropagation()
                this.style.backgroundColor = "orange";
            }
            document.getElementById("put").onclick = function(e) {
                var ev = e || window.envent
                ev.stopPropagation()
            }
            document.getElementById("link").onclick = function(e) {
                var ev = e || window.envent
                ev.stopPropagation()
            }
        </script>
    </body>
</html>

点击a标签，出现提示，是否跳转页面：

            document.getElementById("link").onclick = function(e) {
                var ev = e || window.envent
                //确认窗口
                var info = window.confirm("你浏览的页面存在风险，是否继续？")
                if (info == false) {
                    //取消跳转:使用事件阻止
                    ev.preventDefault()
                }
            }

一些封装函数

//获取滚动高度
function $scrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
}
//根据id获取元素节点
function $(idName) {
    return document.getElementById(idName)
}
//获取可视窗口的宽度
function(){
    return document.body.width || document.documentElement.width||window.innerWidth;
}
//获取随机颜色
function(){
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    return "rgb('+r+','+g+','+b+',)"
}
//获取内部样式表/外部样式表中属性的性性值
//obj-->元素节点
//at-->属性名
function getStyle(obj, at) {
    if (obj.currentStyle) {
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj, null)[at];
    }
}

posted on 2018-11-19 20:08 myworldworld 阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld