欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

什么是事件 ,以及事件的使用与处理程序

程序员文章站 2022-07-02 15:49:44
什么是事件1.HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。简单的说就是 js和html之间交互的触发点。2.事件的分类 窗口 焦点 鼠标 键盘事件绑定的几种方式在Javascript中,事件绑定一共有3种方式:① 行内绑定② 动态绑定③ 事件监听1、行内绑定基本语法:<标签 属性列表 事件=”事件的处理程序” />< i...

什么是事件

1.HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
简单的说就是 js和html之间交互的触发点。
2.事件的分类

    窗口

    焦点

    鼠标

    键盘

什么是事件 ,以及事件的使用与处理程序
什么是事件 ,以及事件的使用与处理程序

事件绑定的几种方式

在Javascript中,事件绑定一共有3种方式:

① 行内绑定

② 动态绑定

③ 事件监听
1、行内绑定

基本语法:

<标签 属性列表 事件=”事件的处理程序” />

< input type=’button’ onclick=’display()’ />

以上代码就是最典型的行内绑定,虽然可以完成我们需要的功能,但是其把结构+样式+行为都绑定在同一个标签中,不利于后期维护。

2.动态绑定
基本语法:
dom对象.事件 = 事件的处理程序(通常是一个匿名函数)
行内绑定与动态绑定的区别
在Javascript中,有一个特殊对象叫做this,其随着运行环境的不同,其指向也是不同的!

事件流

概念

简单来讲事件流就是页面接受事件的顺序,事件发生后会在元素节点之间按照某种顺序传播

document->html->body->div->body->html->document这是DOM2级规定的事件流顺序,如下图:

什么是事件 ,以及事件的使用与处理程序
< body>
< div id=“outer”>
< div id=“inner”>inner</ di v>
< /div>
< script>
// 点击inner的执行顺序
var inner = document.querySelector(’#inner’);
var outer = document.querySelector(’#outer’);
// on***/attachEvent 只能得到冒泡阶段
// 第三个参数默认是false 表示处于冒泡阶段 假如是true表示捕获阶段
inner.addEventListener(‘click’,function() {
console.log(‘捕获 inner’); //3.
},true);

    outer.addEventListener('click',function() {
        console.log('捕获 outer'); //2.
    },true);
    outer.addEventListener('click',function() {
        console.log('冒泡 outer'); //4
    },false);
    document.body.addEventListener('click',function
    () {
        console.log('冒泡 body'); //5
    });
    document.body.addEventListener('click',function
    () {
        console.log('捕获 body');   //1.
    },true);

    // document->html->body->outer->inner->outer->body...
</script>

捕获阶段一般不做什么操作,冒泡阶段可以做一些操作,比如事件委托就是利用冒泡来做的。

有的事件不具有冒泡阶段,比如 焦点事件、onmouseenter/onmouseleave (onmouseour/onmouseout具有冒泡)

dom事件流

事件流包括三个阶段:捕获阶段、目标阶段、冒泡阶段

事件冒泡:事件由最具体元素触发,向上传播的过程;

处于目标阶段:触发事件的那个节点,(目标元素);

捕获阶段:事件由不具体的元素向下查找,直到找到你触发的那个元素,与事件冒泡相反;

阻止冒泡: e.stopPropagation();
Dom操作的方法
通过:nodeType来检测节点类型,
增删改查:
增:

1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
 //createDocumentFragment():为了避免重绘和回流:咱们插入dom时可采用createDocumentFragment,最后一次性的再添加到页面的dom中
 4.cloneNode(true)  克隆  //添加true代表深度克隆,包括子节点的所有内容也可以克隆过来

例如:
 //需求:创建一个div,并添加文字,追加到页面上
 var odiv=document.createElement('div');
 var otext=document.createTextNode('1906A')

//将文本追加到div上  appendChild
odiv.appendChild(otext);

//再将div追加到body上
document.body.appendChild(odiv)

删、修改:

父节点.appendChild(子节点)  尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点,旧节点)  替换节点

查:

getElementById()  获取id ,如果页面上有多个相同id,只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName()  获取表单中name名称  返回类数组
getElementsByClassName  只能获取class名称  返回类数组
querySelector()  只获取匹配的第一个css选择器  //特别适合移动端
querySelectorAll()  获取匹配的css选择器类数组 //特别适合移动端

parentNode:找父节点
parentElement:找父元素

previousSibling:找前一个兄弟节点
previousElementSibling:找前一个兄弟元素
nextSibling:找后一个兄弟节点
nextElementSibling:找后一个元素节点

childNodes:属性,即包括元素节点,也包括文本节点
children:属性 只获取直接子级元素,不获取文本节点(元素类型===1)
firstNode:找第一个节点
lastNode:找最后一个节点
hasChildNodes:用于判断是否有子元素

设置属性

获取: getAttribute('title')
设置: setAttribute('title','修改的属性')

事件处理程序

事件处理程序就是响应某个事件的函数,简单地来说,就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以“on“开头的,比如点击事件的处理程序是”onclick“,事件处理程序大概由以下5种。
1 HTML事件处理程序
2 DOM0级事件处理程序
3 DOM2级事件处理程序
4 IE事件处理程序
5.跨浏览器的事件处理程序
addEventListener();

document对象和所有文档元素都定义了一个名叫addEventListener()方法,使用这个方法人可以为事件目标注册事件处理程序。接收三个参数,第一是要注册处理程序的事件类型,可以是字符串或名字,但不可以带处理程序属性的on前缀。第二是指定类型的事件发生时调用的函数。第三是布尔值,一般会给这个参数为false,如果为true,那么函数将注册为捕获事件处理,并在事件不同的调度阶段调用。

本文地址:https://blog.csdn.net/hanbic/article/details/107298327