js事件总结

布鲁托T
530 阅读5分钟

  • 什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，是可以被 JavaScript 侦测到的行为

  • 事件特性

  • 事件捕获阶段:就是事件从window开始一层一层向目标传递的阶段

  • 目标阶段:当事件到达事件发生现场的阶段

  • 事件冒泡阶段:和事件捕获阶段相反，事件从目标到window传递的阶段

事件冒泡：

<!DOCTYPE html>
<html lang="en"> 
<head> 
    <meta charset="UTF-8">
    <title>事件冒泡</title> 
</head> 
<body> 
    <div> 
        <p>点我</p> 
    </div> 
</body>
</html>

点击p元素时传播方向：p-> div-> body-> html-> document

事件捕获：

还是上面的案例,当点击P元素时，事件的传播方向就变成了这样 document-> html->body-> div->p

  • 事件类型

  • 所有的事件处理函数都由两个部分组成，on+事件名称

  • html事件:  涉及与 BOM 交互的通用浏览器事件。

  • 表单事件:  在元素获得和失去焦点时触发。

  • 鼠标事件:  使用鼠标在页面上执行某些操作时触发。

  • 键盘事件:  使用键盘在页面上执行某些操作时触发。

  • html事件

  • load：  当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；

  • unload：  当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

  • select：  当用户选择文本框（input或textarea）中的一个或多个字符触发；

  • change：  当文本框（input或textarea）内容改变且失去焦点后触发；

  • focus：  当页面或者元素获得焦点时在window及相关元素上面触发；

  • submit：  当用户点击提交按钮在<form>元素上触发；

  • reset：  当用户点击重置按钮在<form>元素上触发；

  • resize：  当窗口或框架的大小变化时在window或框架上触发；

  • scroll：  当用户滚动带滚动条的元素时触发；

widow.onload = function(){
     console.log('页面加载完毕');
}

widow.onresize = function(){
     console.log('页面大小改变');
}

  • 表单事件：

  • blur：  当元素失去焦点时触发。事件不冒泡。
  • focus：  当元素获得焦点时触发。事件不冒泡。
  • focusin：  当元素获得焦点时触发。是focus的冒泡版事件。
  • focusout：  当元素失去焦点时触发。是blur的通用版。
<input type="text" id="text">
       <script>
       text.onfocus = function(){
           console.log('获取焦点')
       }
        text.onblur = function(){
           console.log('失去焦点')
       }
       </script>

  • 鼠标事件:

  • click：  单击鼠标按钮时触发；
  • dblclick：当用户双击主鼠标按钮时触发；
  • mousedown：  当用户按下鼠标还未弹起时触发；
  • mouseup：  当用户释放鼠标按钮时触发；
  • mouseover：  当鼠标移到某个元素上方时触发；
  • mouseout：  当鼠标移出某个元素上方时触发；
  • mousemove：当鼠标指针在元素上移动时触发；
  • mouseenter：  在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；
  • mouseleave：用户把鼠标从悬停的元素上移出时触发。不是冒泡事件，也不会在经过后代元素时触发
<button id="btn">鼠标点击</button>
       <script>
       btn.ondblclick = function(){
           console.log('双击事件')
       }
        text.onclick = function(){
           console.log('单击事件')
       }
       </script>

<div id="div1"></div>
       <script>
       div1.onmousemove = function(){
           console.log('onmousemove事件触发')
       }
       div1.onmouseout = function(){
           console.log('onmouseout事件触发')
       }
        div1.onmousemover = function(){
           console.log('onmousemover事件触发')
       }
       </script>

  • 键盘事件

  • keydown：  按下键盘时触发。
  • keypress：  按下键盘上某个键并产生字符时触发。
  • keyup：  释放键盘上按键时触发。

事件对象

DOM发生事件时会将相关信息收集并存储在event对象中。该对象会包含一些事件的元素、类型等基本信息。

在浏览器中，event对象是传给事件处理程序的唯一参数。在添加事件处理程序时可以使用事件对象：

<input id="btn" type="button" value="DOM Event Object" onclick="alert(event.type)">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(event) {
        alert(event.type);
    };
    btn.addEventListener("click", (event) => {
        alert(event.type);
    }, false);
</script>

- bubbles (布尔值)  — 表示事件是否冒泡

- cancelable (布尔值)  — 表示事件是否可以被取消

- currentTarget(元素)  — 前事件处理程序所在的元素

- defaultPrevented (布尔值)  — 这个状态变量表明当前事件对象的 preventDefault 方法是否被调用过

- eventPhase (整数)  — 表示事件流正被处理到了哪个阶段：1代表捕获阶段，2代表到达目标，3代表冒泡阶段。

- preventDefault(函数)  — 用于取消事件的默认行为。只有cancelable为true才可以调用这个方法

- stopImmediatePropagation (函数)  — 用于取消后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序 |

- stopPropagation (函数)  — 阻止捕获和冒泡阶段中当前事件的进一步传播

- target (元素)  — 事件目标

- type (字符串)  — 被触发的事件类型

- isTrusted (布尔值)  — true表示事件是由浏览器发起的。false表示事件是由脚本创建、修改、通过EventTarget.dispatchEvent()派发

  • js事件和jquery事件的区别

加载DOM：

  • js中常使用window.onload方法
  • jquery常使用$(document).ready()
  • js的window.onload这个方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行
  • jqeury的$(document).ready()只要DOM完全就绪时就可以操作了.
window.onload()$(document).ready()
执行时机在页面所有元素（包括图片，引用文件）加载完后执行。页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完.如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function);等价于window.onload()
编写个数不能同时写多个，后面的将会覆盖前面的。ex:window.οnlοad=function(){ alert("A"); }window.οnlοad=function(){ alert("B"); }结果会执行“B”如果想要顺序执行alert("A")和alert("B")需写成window.οnlοad=function(){alert("A");alert("B");}可以同时写多个
简写无(document).ready(function(){　　//to do;})；可写成(document).ready(function()　　//todo;)；可写成().ready(function(){ //()不带参数默认是document 　　//to do;});或(function(){　　//to do;});

  • 操作属性的区别

JS里面用来操作属性的方法：

  • div.setAttribute("","");——设置属性、修改属性

  • div.removeAttribute("");——移除属性，引号里面写一个属性名

  • div.getAttribute();——获取属性

JQUERY里面用来操作属性的方法：

  • 添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫做test，属性的值是aa。

  • 移除属性：div.removeAttr("test");——移除test这条属性。

  • 获取属性：div.attr("test");——在attr方法里面直接写入一个属性的名就可以了。

  • 操作样式的区别

 JS里面操作样式的关键字是style。

例：

div.style.backgroundColor= "red";

把这个div的背景色设置成为了红色。

jquery里面操作样式的关键字是css。

例： div.css("background-color","yellow");

把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化。

注意：

JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的。

jquery操作样式的方法可以是内联的也可以是内嵌的。

avatar
文章
阅读
粉丝