JavaScript事件

2023-08-07 11:00:34

JavaScript是基于对象、采用事件驱动的脚本语言。在DOM中，通过鼠标或按钮在浏览器窗口或网页上执行的操作称为事件。

事件处理过程：

事件是在浏览器的作用域内发生的事情——用户点击按钮、鼠标指针移动，或者从服务器加载完web页面等等。多个不同的事件使脚本能够响应鼠标、键盘及其他情况。事件是JavaScript用于web文档具有交互性的关键方法。用户与网页或者浏览器窗口交互时，将发生下述重要事情。

发生物理事件：用于执行某些操作，如单击或移动鼠标、按下键盘等。
在浏览器中触发事件：用户浏览器触发事件。
浏览器创建事件对象：对于触发的每个事件，web浏览器都创建一个对象。这个对象包含有关事件的信息，供事件处理程序使用。
调用用户定义的事件处理程序：可使用JavaScript创建事件处理程序，它们与事件对象或网页元素交互，让html元素具备交互性。事件处于三个阶段（捕获阶段；目标阶段；冒泡阶段）。
调用浏览器事件处理程序：除用户定义的事件处理程序外，浏览器也提供默认处理程序，以根据触发事件采取不同的措施。例如：用户单击链接时，将调用浏览器时间处理程序将导航到链接指定的href位置。

鼠标事件：

onclick、dbclick

mouseover/mouseenter、mouseout/mouseleave

mousedown、mouseup、mousemove

示例1：

<img src="img/6.jpg">
    <script>
        var img=document.querySelector('img');
        img.onmouseenter=function (){
            img.title='我是美女';
            this.src='img/9.jpg';
            img.style.height='500px';
            img.style.width='700px';
        }
        img.onmouseleave=function(){
            this.src='img/6.jpg';
        }   
    </script>

其他事件：

load(页面完成加载)、change、resize(窗口尺寸改变窗口)

例如：

窗口加载完毕事件：window.onload=function(){            }

焦点：

blur(失去焦点)、focus

示例2：

 <script>
        window.onload = function () {
            var os = document.querySelector('span');
            document.querySelector('input').onblur = function () {
                if (this.value.length < 8) {
                    os.style.display = 'inline-block';
                }
            }
        }
    </script>
    <label for="">用户名：</label><input type="text"><span>用户名至少8位</span><br>
    <label for="">密码：</label><input type="password">

键盘事件：

keydown、keyup、keypress

<script type="text/javascript" language=JavaScript charset="UTF-8">
      document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e && e.keyCode==27){ // 按 Esc 
                //要做的事情
              }
            if(e && e.keyCode==113){ // 按 F2 
                 //要做的事情
               }            
             if(e && e.keyCode==13){ // enter 键
                 //要做的事情
            }
        }; 
</script>

对象事件：对事件的一个抽象

当事件触发时，系统会发生一个事件对象，并且将对这个对象传递给事件函数。

在低版本IE中 window.event

事件对象兼容性写法： e||window.event

例：

function (e){
        e==e||window.event;
    }

事件流：

冒泡：事件有最具体的对象触发，层层向外传递，直到最外层元素；

捕获：由最外层触发，层层向内传递，直到具体元素；

阻止事件冒泡：stopPropageation( )

IE8以下低版本：

cancelBubble=true;
e?stopPropagation( ):window.event.cancelBubble=true;

示例3：

<div class="one">
        <button>点击</button>
    </div>
    <script>
        document.querySelector('button').onclick=function(e){
            alert('我是按钮');
            // e.preventDefault();//拦截没效果，只对标签有效
            // e.stopPropagation();//阻止冒泡
            // e.cancelBubble=true;//ie一下低版本
            e?e.stopPropagation():window.event.cancelBubble=true;
        }
        document.querySelector('.one').onclick=function(e){
            alert('我是div');
            e?e.stopPropagation():window.event.cancelBubble=true;
        }
        document.querySelector('body').onclick=function(){
            alert('我是body');
        }
    </script>

W3C事件：

添加事件：addEventListener(事件名，fn,flag)

flag:true 捕获 false 冒泡

btn.addEventLister('onclick',function(){
                alert('hello world!');},false);

移除事件：removeEventmLisetener(事件名，fn，flag);

示例4：

<button>按钮一</button>
    <button>移除按钮一点击事件事件</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',clickFn,false);
        function clickFn(){
            console.log('click');
        }
        btn.addEventListener('mouseenter',function (){
            console.log('on');
        },false);

        document.querySelectorAll('button')[1].addEventListener('click',function (){
            btn.removeEventListener('click',clickFn,false);
        },false);
    </script>

综合案例：（聊天框）

<div class="cnt"></div>
    <div class="bt">
        <input type="text"><button>发送</button>
    </div>
    <script>
        var o = document.querySelector('.cnt');
        var inp = document.querySelector('input');
        document.querySelector('button').onclick = function () {
            send();
        }

        //回车发送消息
        inp.onkeyup=function(a){
            a=a||window.event;
            if(a.keyCode==13){
                send();
            }
        }
        function send() {
            var txt = inp.value;
            if (txt.trim() == '') {
                return;
            }
            //  o.innerHTML=o.innerHTML+"<br>"+txt;
            var s = document.createElement('span'); //创建标签
            s.innerHTML = txt;
            o.appendChild(s); //将新创建的标签加入到div中
            o.innerHTML = o.innerHTML + '<br>'; //添加换行
            inp.value = ''; //清空消息框
        }
    </script>

码农公寓