js-API 绑定、解绑事件区别 与window对象的方法 定时器

绑定事件的区别

方法使用的时候需要点出来

函数直接调用，不需要点出来

相同点: 都可以为元素绑定事件

• 不同点:

• 1.方法名不一样

• 2.参数个数不一样addEventListener三个参数,attachEvent两个参数

• 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持

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

• 4.this不同,addEventListener 中的this是当前绑定事件的对象

• attachEvent中的this是window

• 5.addEventListener中事件的类型(事件的名字)没有on

• attachEvent中的事件的类型(事件的名字)有on

解绑事件

my$(“btn”).οnclick=null;

my$(“btn”).removeEventListener(“click”,f1,false);

my$(“btn”).detachEvent(“onclick”,f1);

用什么方式绑定事件 用什么方式解绑

有以下三种情况
1.解绑事件
  * 对象.on事件名字=事件处理函数--->绑定事件
  * 对象.on事件名字=null;
  * 2.解绑事件
  * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
  * 对象.removeEventListener("没有on的事件类型",函数名字,false);
  * 3.解绑事件
  * 对象.attachEvent("on事件类型",命名函数);---绑定事件
  * 对象.detachEvent("on事件类型",函数名字);

绑定事件和解绑事件兼容代码

function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解绑事件的兼容
  //为任意的一个元素,解绑对应的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

在js4的案例里面有详细代码

事件冒泡

概念： 事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

事件冒泡,阻止事件冒泡,
如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

e.stopPropagation(); 谷歌和火狐支持,

my$("dv3").onclick = function(e) {
        console.log("nnn");
        e.stopPropagation();
 };

总结事件

事件的三个阶段

1. 事件捕获阶段
2. 事件的目标阶段
3. 事件的冒泡阶段

通过e.eventPhase 这个属性可以知道当前的事件是什么阶段的

具体咋i案例js4里面

模拟百度搜索的功能

在案例js4 里面

为同一个元素绑定不同的事件

• 事件绑定在dom当中 有三种

​ 对象.on的方式 addEventListener attachEvent

​ on不能绑定多个 绑定多个会出现覆盖的情况

• 在jq中的话

​ 1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置； 2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以 　用来代替live()函数，live()函数在1.9版本已经删除； 3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()

• 查看事件里面有什么

  my$("btn").onclick = function(e) {
          console.log(e);
   }
  

  可以看到onclick里面有 type 等于 click

使用switch 判断

具体实现在案例那边

DOM

• JavaScript分三个部分:

  • 1. ECMAScript标准—基本语法
  • 2. DOM—>Document Object Model 文档对象模型,操作页面元素的
  • 3. BOM—>Browser Object Model 浏览器对象模型,操作浏览器的

• 浏览器中有个顶级对象:window----皇上

  • 页面中顶级对象:document-----总管太监
  • 页面中所有的内容都是属于浏览器的,页面中的内容也都是window
  • 变量是window的

系统对话框

window.alert(“您好啊”);//以后不用,测试的时候使用
window.prompt(“请输入帐号”);
var result=window.confirm(“您确定退出吗”);
console.log(result);

页面加载事件

window.function () {
//      document.getElementById("btn").onclick=function () {
//        alert("您好");
//      };
//    };

页面加载完了才会执行代码

function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
 };
};

//扩展的事件---页面关闭后才触发的事件
//    window.onunload=function () {
//
//    };
    //扩展事件---页面关闭之前触发的
//    window.onbeforeunload=function () {
//      alert("哈哈");
//    };

location对象

 //对象中的属性和方法
    //location对象
    //console.log(window.location);

//    //地址栏上#及后面的内容
//    console.log(window.location.hash);
//    //主机名及端口号
//    console.log(window.location.host);
//    //主机名
//    console.log(window.location.hostname);
//    //文件的路径---相对路径
//    console.log(window.location.pathname);
//    //端口号
//    console.log(window.location.port);
//    //协议
//    console.log(window.location.protocol);
//    //搜索的内容
//    console.log(window.location.search);

function () {
      document.getElementById("btn").onclick=function () {
       //location.href="http://www.jd.com";//属性----------------->必须记住
       //location.assign("http://www.jd.com");//方法
        //location.reload();//重新加载--刷新
        //location.replace("http://www.jd.com");//没有历史记录



      };
    };
    
location.href="http://www.jd.com"; //属性 跳转页面的
location.assign("http://www.jd.com");//方法  跳转页面的
location.replace("http://www.jd.com");//也可以跳转  但是不能在浏览器中返回

history对象

window.history.back(); 后退

window.history.forward(); 前进

navigator对象

通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);

定时器

在bom中有两个定时器 —计时器

定时器

参数1： 函数

参数2： 时间 毫秒

var timeId = setInterval(
        function() {
            console.log("哈哈");
        }, 1000
    )
这个代码每过1000毫秒就会继续执行    
定时器的返回值就是 他的id值  可以用变量进行接收

清理定时器

window.clearInterval(timeId);

获取随机数1-100 和向左右移动

var x = parseInt(Math.random() * 100 + 1);
var y = parseInt(Math.random() * 100 + 1);
      //设置元素的left和top属性值
my$("dv").style.left = x + "px";
 my$("dv").style.top = y + "px";