javascript--事件

最新推荐文章于 2022-09-30 19:15:31 发布

wenjuanzhao

最新推荐文章于 2022-09-30 19:15:31 发布

阅读量383

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_26746521/article/details/50946710

版权

javaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

javaScript就是为了解决这个问题设计的，通过将一些功能在客户端实现来节省返回服务器的时间

事件流

1、冒泡型事件

基本思想：事件是按照最特定的目标事件到最不确定的事件顺序出发

2、捕获型事件

基本思想：事件从最不精确的对象开始触发到最精确的对象

3、DOM事件流

DOM同时支持两种事件模型：捕获型和冒泡型但是捕获型先发生，DOM事件模型最独特的性质在于，文本节点也出发事件（IE中不会）

事件处理函数/监听函数

事件是用户或浏览器自身进行的特定行为。这些事件都有特定的名字 click onload

事件处理函数：用于响应某个事件而调用的函数称为事件处理函数

事件处理函数的两证分配方式：

1、在javaScript中分配事件处理函数：首先获得要处理对象的引用

var div1=document.getElementById("div1");   //这种分配方式的事件处理函数名称必须小写
   div1.onclick= function () {
       console.log("111");
   }

2、在HTML中分配事件处理函数

<div id="div1" οnclick="console.log(111)">sss</div>  //处理函数可以任意大小写

为每个可用事件分配多个事件处理函数

IE有自己独有的方法，DOM却规定了另一个方法

在IE中每个元素和window对象都有两个方法attachEvent()方法和detachEvent()方法,

attachEvent()方法用来给事件附加一个处理函数，而detachEvent()方法将时间处理函数分离出来

function func1(){
    alert(111);
}
window.onload =function(){
 var div1=document.getElementById("div1");   //这种分配方式的事件处理函数名称必须小写
  div1.attachEvent("onclick",func1);
};

但是到ie11不支持这两个方法

注意：事件处理函数总是按照添加他们的顺序进行调用

DOM

DOM方法addEventListener()方法和removeEventListener()用来分配和移除事件处理函数，与IE不同的是这个方法需要3个参数：
事件名称要分配的函数处理函数适用于冒泡阶段(true)还是捕获阶段(false)

注意：冒泡阶段的事件处理函数必须在删除时指定是还是冒泡阶段的事件处理函数

事件对象

事件对象：创建包含关于刚刚发生的事件的信息的事件对象：包含：

1、引起时间的对象

2、事件发生时鼠标的信息

3、事件发生时键盘的信息

事件对象只有在发生事件时才被创建，且只有事件处理函数才能访问。只有事件处理函数执行完毕后，事件对对象就被销毁

定位

IE中，事件对象是window对象的一个属性，

var div1=document.getElementById("div1");   //这种分配方式的事件处理函数名称必须小写
div1.onclick=function(){
    var oEvent=window.event; 
}
   //尽管它是window对象的属性，但是还是只能在事件发生时才能访问，所有的事件处理函数执行完后，事件对象就会被销毁

DOM准则说，event对象必须作为唯一的参数传给事件处理函数

var div1=document.getElementById("div1");   //这种分配方式的事件处理函数名称必须小写
div1.onclick=function(e){
    console.log(e);
}

事件对象的属性方法

http://zccst.iteye.com/blog/1806261

事件对象（IE中和DOM）的相似性

1、获取事件类型返回类似click和mouseover

var div1=document.getElementById("div1");   
div1.onclick=function(e){
    console.log(e.type);     
}

2、获取按键代码

通过keyCode来获得

3、检测Shift、Alt、Ctrl键

e.shiftKey

4、获取客户点击的坐标

获取的是鼠标指针在客户端(浏览器)区域的位置当浏览器变小的时候，点相同的位置值会发生变化

window.onload=function(){
    var dd=document.getElementById("div1");
    dd.onclick=function(e){
        var ix= e.clientX;
        var iy= e.clientY;
        console.log(ix,iy);
    }
}

5、获取屏幕坐标

获取的是鼠标指针在计算机品屏幕上的位置

window.onload=function(){
    var dd=document.getElementById("div1");
    dd.onclick=function(e){
        var ix= e.screenX;
        var iy= e.screenY;
        console.log(ix,iy);
    }
}

IE、DOM事件流的区别

1、获取目标

IE中e.srcElement

DOM中 e.target

2、获取字符代码

在IE和DOM中都支持event对象的keyCode属性，它会返回按下键的数值代码

IE中 e.keyCode返回字符的代码

DOM要获取字符代码 e.charCode

3、组织某个事件的默认行为

IE中 e.returnValue=false;

Mozilla中e.preventDefault();

什么时候才需要阻止事件的默认行为呢？

1、当用户右键点击页面时，阻止他使用上下文菜单。

    document.body.oncontextmenu=function(e){
        if(document.all){        //判断是否为ie浏览器,因为这个属性只有在ie中才会出现
            window.event.returnValue=false;  //ie浏览器中的事件对象一定是window对象的属性
        }
        else{
            e.preventDefault(); console.log(222)

        }
    }
}

2、在为文本框键入字符时，阻止他的默认行为，已禁止键入特定字符

a、利用正则表达式来阻止用户输入某些特定的字符串

<!doctype html>
<html>
<head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script language ="javascript">
        function ValidateValue(textbox)
        {
            var IllegalString = "\`~@#;,.!#$%^&*()+{}|\\:\"<>?-=/,\'";
            var textboxvalue = textbox.value;
            var index = textboxvalue.length - 1;

            var s = textbox.value.charAt(index);

            if(IllegalString.indexOf(s)>=0)
            {
                s = textboxvalue.substring(0,index);
                textbox.value = s;
            }
        }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <input id="Text1" runat="server" type="text" onkeyup = "ValidateValue(this)"/></div>
</form>
</body>
</html>

4、停止事件复制(冒泡)

IE中：要阻止事件进一步冒泡 e.cancelBubble=true;

mozilla中：e.stopPropagation()

任由事件复制(冒泡) 一次输出div1 body html

<!doctype html>
<html lang="en"  οnclick="console.log('html')">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body οnclick="console.log('body')">
<style>
    #div1{
        width: 100%;height: 200px;background: #000;
    }
</style>
<script>
</script>
<div id="div1" οnclick="console.log('div')"></div>
</body>
</html>

经过处理后控制台只会输出div1，不会冒泡到body和html中

<!doctype html>
<html lang="en"  οnclick="console.log('html')">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body οnclick="console.log('body')">
<style>
    #div1{
        width: 100%;height: 200px;background: #000;
    }
</style>
<script>
    function handleclick(e){
        console.log("div1");
        if(document.all){
            e.cancelBubble=true;
        }
        else{
            e.stopPropagation();
        }
    }
</script>
 <!-- event作为事件对象传递给handleClick-->
<div id="div1" οnclick=handleclick(event)></div>   
</body>
</html>

事件的类型

DOM标准定义了以下几组事件

1、鼠标事件

2、键盘事件

3、html事件：窗口发生变动或者特定的客户端-服务器端发生交互时触发

4、突变事件：底层的dom结构发生变化

鼠标事件

鼠标事件的方法：

click：单击鼠标（按下右键不会发生）

dbclick：双击鼠标左键时触发

mousedown：用户点击任意一个鼠标按钮时发生

mouseout：鼠标指针在某个元素上，且用户正要移出元素的边界时发生

mouseover：鼠标移出某个元素，到另一元素上

mouseup：用户松开一个按钮

mousemove：鼠标在某个元素上时持续发生

此程序会验证什么时候调用哪个方法

<!doctype html>
<html lang="en"  οnclick="console.log('html')">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body οnclick="console.log('body')">
<style>
    #div1{
        width: 100%;height: 500px;background: #000;
    }
</style>
<script>
       function handleEvent(e){
           var oo=document.getElementById("text1");
           oo.value+="\n"+ e.type;
       }
</script>
    <div id="div1" οnmοuseοver="handleEvent(event)" οnmοuseοut="handleEvent(event)" οnmοusedοwn="handleEvent(event)"
              οnmοuseup="handleEvent(event)" οnclick="handleEvent(event)" οndblclick="handleEvent(event)"
            >
        <textarea id="text1" rows="15" cols="50"></textarea>
    </div>
</body>
</html>

鼠标事件的属性

1、坐标属性 clientX clientY

2、type属性

3、target或者srcElement（得到事件源）

4、shiftKey、ctrlKey、altKey、metKey

5、button属性

注意：在ie中对于mouseover和mouseout事件，事件对象还有额外的属性

mouseover事件（从别的地方到现在元素上） toElemen属性等于srcElement

mouseout事件（从现在元素到别的地方） formElement属性等于srcElement

所以这种会有冗余所以在dom中，只有一个relatedTarget

mouseover中 relatedTarget 指的就是鼠标来自哪

mouseout中 relatedTarget指的就是鼠标要去哪

以上事件发生地顺序

按下鼠标的时，mousedown mouseup onclick

键盘事件

键盘事件的方法：

keydown：用户在键盘按下某键时发生，一直按着某键，会不断触发

keypress：用户按下一个按键并产生一个字符时发生，一直按键时，他就会持续发生

keyup：用户释放按着的键时会触发

键盘事件的属性：

keyCode属性

charCode属性（仅dom）

target和srcElement属性

发生的顺序

按下某一个字符键

keydown keypress keyup

按下某一个非字符键

keydown keyup

HTML事件

load事件：页面完全加载后，在window对象上触发

所有框架集都加载后，在框架集上触发

<img>完全载入后，在其上触发

unload事件：加载换成卸载后触发

resize事件：窗口或者框架的大小触发

window.onresize=function(){
    console.log(window.innerWidth);
}

scroll事件：用户在任何带滚动条的元素上卷动他的时候触发

window.onscroll=function(){
    console.log(document.body.scrollTop);  //获得的是滚动条卷动的举例
}

focus事件：任何元素或者窗口本身获取焦点时触发

blur事件：任何元素或者窗口本身失去焦点时触发

变化事件

虽然变化事件已经是dom标准的一部分，但是目前没有任何的主流的浏览器实现了

跨平台事件（自定义兼容性）

跨浏览器代码的目的是，尽可能地弱化ie事件模型和dom事件模型之间的区别

1、eventUtil对象

无论何时，要创建可用在同一个任务中的多个函数，最好创建一个管理他们容器对象。这样，调试时就可以容易地指出函数是在哪里定义的。

EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
   if(oTarget.addLoadedEventListener){    //为DOM事件流做准备
       oTarget.addEventListener(sEventType,fnHandler,false);
   }
    else if(oTarget.attachEvent){      //为IE事件流做准备
       oTarget.attachEvent("on"+sEventType,fnHandler);
   }
    else{       //为所有的浏览器来准备
       oTarget["on"+sEventType]=fnHandler
   }
}

基本的思想就是：先检测是什么浏览器，再针对具体的浏览器来执行具体的代码

wenjuanzhao

关注

0
点赞
踩
0

收藏

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

javaScript就是为了解决这个问题设计的，通过将一些功能在客户端实现来节省返回服务器的时间事件流1、冒泡型事件基本思想：事件是按照最特定的目标事件到最不确定的事件顺序出发2、捕获型事件基本思想：事件从最不精确的对象开始触发到最精确的对象
复制链接

扫一扫