Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

事件 #9

Open
Qhappyman opened this issue Apr 11, 2019 · 0 comments
Open

事件 #9

Qhappyman opened this issue Apr 11, 2019 · 0 comments

Comments

@Qhappyman
Copy link
Owner

事件

  1. 事件流

    事件流描述的是从页面中接收事件的顺序

    • 事件冒泡

      IE事件为事件冒泡，即事件由最具体的文档层层向上传播，相当于每层都包含了这个事件

      <html>
	<head>
		<title>事件冒泡</title>
	</head>
	<body>
		<div>Click me</div>
	</body>
</html>

      比如点击最里面的盒子，这个点击事件便会沿着DOM这个流向上传播

      div->body->html->document

      有的浏览器将一直冒泡到window对象

    • 事件捕获

      以上面代码为例，在事件捕获阶段，document这个对象首先接收到click事件，然后沿DOM树传播到实际目标

      document->html->body->div

      DOM事件流

      事件流包括三个阶段：

      1. 事件捕获阶段

      2. 处于目标阶段

      3. 事件冒泡阶段

        其实相当于将上面俩部分合起来，当你点击div时，系统捕获你这个行为是从上到下，这个行为的引发事件是从下到上，通俗易懂

        注意捕获目标阶段在body就停止了，然后是处于目标阶段，当然的处于目标阶段也被包含到事件冒泡阶段的一部分

  2. 事件类型

    事件类型比较多，这里大概列举一下，需要时自己查

    • UI事件

    • 焦点事件（元素获得或失去焦点）

    • 鼠标事件

    • 滚轮事件

    • 文本事件

    • 键盘事件

    • 合成事件

    • 变动事件

    • 变动名称事件

      UI

      load,当元素加载完在元素上触发

      unload 当元素卸载完毕后在元素上触发，只要用户从一个页面切换到另一个页面就会触发，用途：清除引用，防止内存泄漏

      abort 当用户停止下载且没有下载完毕时触发

      error javaScript加载错误时触发，比如图像加载错误

      resize 当窗口或框架大小变化时在window触发

      scroll 当用户滚动带滚动条的内容时在该元素上触发

      焦点事件

      blur 元素失去焦点时触发，不会冒泡

      DOMFocusIn 元素获得焦点时触发，冒泡

      focus 获得焦点时触发，不冒泡

      focusin 获得焦点时触发，冒泡

      focusout 失去焦点时触发

      成对存在，历史版本问题

      焦点从一个元素移到另一个元素上发生的事件

      focusout->focusin

      blur->DOMFocusOut

      focus->DOMFocusIn

      鼠标与滚轮事件

      click 最普通的点击事件

      dblclick 双击按钮

      mousedown按下任意鼠标键触发

      mouseenter鼠标光标首次移到元素内部触发，不冒泡

      mouseleave

      mousemove鼠标在元素内部移动时重复触发

      mouseout鼠标位于一个元素上方，然后移到另一个元素时触发

      mouseover鼠标位于一个元素外部，首次移动到另一个元素边界内触发

      mouseup 释放鼠标按钮触发

      坐标位置：clientX clientY，视口中水平与垂直位置

      ​ pageX pageY 页面中位置，不止视口

      ​ screenX screenY 相对于整个电脑屏幕的位置

  3. 事件委托

    事件委托又叫事件代理，其中与事件冒泡有着不可分割的联系，原理就是利用事件冒泡来实现

    <ul>
	<li>first</li>
	<li>second</li>
	<li>third</li>
</ul>

    看这一段代码，我们平时想为每一个li都添加一个点击事件，就设置三个onlick事件，这样不仅不美观，而且占用内存，影响页面加载。而利用事件冒泡就可以很好解决这个问题。我们可以直接在ul标签上添加一个onlick事件，因为每一个li都是位于ul下边，根据事件冒泡原理这个点击事件会一层一层上去，最终处理事件的是ul里面的函数，避免了代码繁杂

    1. 事件绑定

      • 使用DOM操作

        var a=document.getelemetbyid(id);
a.onlick=functon(){};

      • 直接在html标签中绑定

        <div onlick="fun()"></div>
js:fun(){}

      • 利用添加事件函数(事件监听函数)

        elementObject.addEventListener(eventName,handle,useCapture);

        参数 obj为点击的元素对象，ev为事件类型注意要去掉事件的on，只写 click、dblclick、mouseover这样的事件，fn为事件运行的函数。

        elementObject：DOM对象（即DOM元素 ）

        eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等

        handle：事件句柄函数，即用来处理事件的函数。

        useCapture：Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

        事件移除

        • useCapture设为false

        • 移除事件监听器

          btn2.removeEventListener("click",fn1,false)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Qhappyman