常用的web方法 web API(一)

  • 作者: 凯哥Java(公众号:凯哥Java)
  • 工作小总结
  • 时间:2018-09-19 09:45
  • 2589人已阅读
简介 一、为元素绑定事件三种方式:1对象.on+事件类型=事件处理函数  例子: my$("btn").onclick=function(){};     事件处理函数:可以是命名函数,也可以是匿名函数2对象.addEventListener("事件类型",事件处理函数,false);

🔔🔔好消息!好消息!🔔🔔

 如果您需要注册ChatGPT,想要升级ChatGPT4。凯哥可以代注册ChatGPT账号代升级ChatGPT4

有需要的朋友👉:微信号 kaigejava2022

本文主要讲解web API常用的方法,主要内容如下:

1:绑定事件的几种方式

2:解绑事件的几种方式

3:创建元素的几种方式

4:获取节点的几种方式

一、为元素绑定事件三种方式:

1 对象.on+事件类型=事件处理函数

   例子:  my$("btn").onclick=function(){};

         事件处理函数:可以是命名函数,也可以是匿名函数

2 对象.addEventListener("事件类型",事件处理函数,false);

     例子: my$("btn").addEventListener("click",function(){},false);

3 对象.attachEvent("on"+事件类型,事件处理函数);

     例子: my$("btn").attachEvent("onclick",function(){});

为元素解绑事件三种方式

1 对象.on事件类型=null(同一个元素,注册了多个相同的事件,只能执行最后一个

 例子: my$("btn").onclick=null;

2 对象.removeEventListener("事件类型",事件处理函数名字,false);

 例子: my$("btn").removeEventListener("click",f1,false);

3 对象.detachEvent("on"+事件类型,事件处理函数名字);

 例子:l my$("btn").detachEvent("onclick",f1);

总结:addEventListener和attachEvent的区别

   addEventListener 谷歌和火狐值,IE11支持,IE8不支持

       三个参数,第一个参数是没有on的

       这里的this是当前的对象

   attachEvent IE8支持,谷歌和火狐不支持,IE11不支持

       两个参数,第一个参数有on

       这里的this是window对象

最后:用什么方式绑定事件,就用对应的方式解绑事件

二、百度搜索大项目

1.获取文本框,注册键盘抬起事件

my$("txt").onkeyup=function ()

三、创建元素的三种方式

1、 //创建p标签

 //如果是在页面全部加载完毕后通过下面方式创建元素,会把页面中所有的内容全部干掉

 document.write("<p>this is p</p>");

2、my$("dv").innerHTML="<p>这是一个P</p>";

3、//创建input标签

3d9cba9bd25e13adf1ceda47a99220ba.png

var inputObj=document.createElement("input");

inputObj.type="button";

inputObj.value="这是按钮";

//追加到div中

my$("dv").appendChild(inputObj);

四、获取对应节点

//ul的父级节点

console.log(my$("uu").parentNode);

//ul的父级元素

console.log(my$("uu").parentElement);

//ul的所有子级节点

console.log(my$("uu").childNodes);

//ul的所有的子元素

console.log(my$("uu").children);

//ul中第一个子节点

console.log(my$("uu").firstChild);

//ul中第一个子元素

console.log(my$("uu").firstElementChild);

//ul中最后一个子节点

console.log(my$("uu").lastChild);

//ul中最后一个子元素

console.log(my$("uu").lastElementChild);

//某个li的前一个兄弟节点

console.log(my$("three").previousSibling);

//某个li的前一个兄弟元素

console.log(my$("three").previousElementSibling);

//某个li的后一个兄弟节点

console.log(my$("three").nextSibling);

//某个li的后一个兄弟元素

console.log(my$("three").nextElementSibling);

//总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素

//但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持


TopTop