javaScript-API篇

javaScript-API篇DOM获取元素事件导读:API------应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发者基于某软件或硬件得以访问一组例程的能力,且无需访问源码或理解内部代码。Web API------浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM),Web工程师利用两者进行页面交互。DOM定义:文档对象模型,是W3C组织推荐的处理可扩展...
摘要由CSDN通过智能技术生成


导读:
API------应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发者基于某软件或硬件得以访问一组例程的能力,且无需访问源码或理解内部代码。
Web API------浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM),Web工程师利用两者进行页面交互。
DOM和BOM区别

DOM

定义:文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
DOM树:DOM树

获取元素

  1. 根据ID获取标签:getElementById(id)
       作用:返回对应的ID的标签元素
  2. 根据标签名获取标签:getElementsByTagName(标签名)
       作用:返回带有指定标签名的对象(伪数组)的集合,或者空的伪数组
       PS:element.getElementsByTagName()获得某个element父元素下的指定标签名的对象的集合
  3. 根据类名获取标签:getElementsByClassName(类名)
       作用:返回带有指定类名的标签的对象(伪数组)的集合,或者空的伪数组
  4. 根据选择器获取标签:querySelector(选择器)/querySelectAll(选择器)
       作用:返回第一个/所有符合选择器的元素
  5. 特殊元素获取(body、html)
       body:document.body
       html:document.documentElement

PS:1、2、3都可以通过element.XXX()获得某个element父元素下的指定标签
PS:3、4方法IE浏览器i9以下不支持(兼容性问题)

事件基础

1.事件三要素:A事件源 B事件类型 C事件处理程序(A.按钮 B.被点击,执行 C.function)

2.基本鼠标事件类型:

鼠标事件 触发条件
onmousedown 鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发
onmouseup 鼠标按钮被释放弹起时触发。不能通过键盘触发
onclick 单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行
ondblclick 双击鼠标左键时触发
onfocus 获得鼠标焦点
onblur 失去鼠标焦点
onmouseenter 鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发
onmouseleave 鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发
onmouseover 鼠标移入目标元素上方。鼠标移到其后代元素上时会触发
onmouseout 鼠标移出目标元素上方
onmousemove 鼠标在元素内部移到时不断触发。不能通过键盘触发
oncontentmenu 点击鼠标右键时触发
onselectstart 鼠标选中区域

PS:click()是方法,xxx.click(function(){})→xxx触发onclick事件,执行function()事件处理程序
参考:https://www.cnblogs.com/starof/p/4106904.html

3.事件绑定

3.1 传统事件绑定
操作1---<div onclick=''></div>
操作2---var div=querySelector(div);div.onclick=function(){};
缺点:1.绑定多次相同事件,后者覆盖前者;
     2.不支持DOM事件流(事件捕获-目标元素-事件冒泡)
     
3.2 W3C标准事件绑定(推荐使用)
标准浏览器:obj.addEventListener('click',fn,false)
三个参数:1.触发事件
         2.触发的函数
         3.布尔值(表示是否捕获:true--捕获;false--冒泡【默认】)
 PS:event.stopPropagation()阻止事件冒泡
IE浏览器:obj.attchEvent('onclick',fn)
两个参数:1.事件驱动
         2.触发函数
优点:1.绑定多次相同类型事件,事件依次发生;
     2.支持DOM事件流
     
取消事件监听
标准浏览器:obj.removeEventListener('click',fn,false)
IE浏览器:obj.detachEvent('onclick',fn)

4.DOM事件流(事件捕获-当前目标元素-事件冒泡)

注意:   
   1.JS代码只能执行捕获或者冒泡其中的一个阶段;
   2.onclick和attachEvent只能得到冒泡阶段;
   3.有些事件没有冒泡阶段,比如onblur、onfocus、onmouseenter、onmouseleave

5.事件对象
定义:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
注意:event在IE中有兼容性问题,解决方法-----e=e||window.event
事件对象属性:

属性 描述
target 返回触发事件的对象 标准
srcElement 返回触发事件的对象 非标准
currentTarget 返回其事件监听器触发该事件的元素,类似于this(存在兼容性问题)
type 返回触发事件的类型
can
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值