this的使用

2024-02-05 14:29:04

什么是this

this是Javascript语言的一个关键字
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象

this的多种用法

全局范围内
函数调用
作为对象方法的调用
call/apply/bind 的调用
作为构造函数调用

全局范围内使用this

在全局范围内使用this ，它将指向全局对象（浏览器中为 window）

var name = 'name1';
console.log(name);
 
this.name = 'name2';
console.log(name);
console.log(this.name);
 
window.name = 'name3';
console.log(name);
console.log(this.name);
console.log(window.name);

纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global

// 案例1
function test(){
　　this.x = 1;
　　alert(this.x);
}
test(); // 1


// 案例2
var x = 1;
function test(){
　　alert(this.x);
}
test(); // 1


// 案例3
var x = 1;
function test(){
　　this.x = 0;
}
test();
alert(x); //0

作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象

function Car(color, make, model){
  this.color = color;
  this.make = make;
  this.model = model;
}

当在事件中表示当前元素的时候，可以使用this

var btn = document.getElementById("btn");
btn.onclick = function() { 
     this.value = "按鈕";   //给btn注册的事件，因此this表示btn
}

阻止默认事件的发生

对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false

<a id="link" href="http://www.baidu.com">这是a</a>
<script>
var link = document.getElementById("link");
link.onclick = function() {
    alert("嘻嘻"); 
    return false; //阻止页面跳转
}
</script>

时间流-事件冒泡机制

气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。

相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；

事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。

当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制

在不同浏览器中，冒泡的程度不同

IE 6.0:

div -> body -> html -> document

其他浏览器:

div -> body -> html -> document -> window

注意：并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

<style>
  #father{
    width: 300px;
    height: 300px;
    background-color: #f00;
    margin: auto;
  }
</style>
</head>
<body>
    <div id="father">
        <button id="btn">点击</button>
    </div>
<script>
    window.onload = function(){
        var father = document.getElementById('father');
        var btn = document.getElementById('btn');
        father.onclick = function(){
            alert('father点击');
        }
        btn.onclick = function(){
            alert('btn点击');
        }
        document.onclick = function(){
            alert('文档点击');
        }
    }
</script>

阻止冒泡的方法

标准浏览器和 ie浏览器

w3c：event.stopPropagation()

IE：event.cancelBubble = true

兼容写法

if(event && event.stopPropagation){  // w3c标准 
    event.stopPropagation(); 
}else{  // IE系列 IE 678 
    event.cancelBubble = true; 
}

<style>
  #father{
    width: 300px;
    height: 300px;
    background-color: #f00;
    margin: auto;
  }
</style>
</head>
<body>
    <div id="father">
        <button id="btn">点击</button>
    </div>
<script>
    window.onload = function(){
        var father = document.getElementById('father');
        var btn = document.getElementById('btn');
        father.onclick = function(){
            if(event&&event.stopPropagation){ // w3c标准，阻止冒泡事件
                event.stopPropagation();
            }else{ // IE系列 ie678
                event.cancelBubble = true;
            }
            alert('father点击');
        }
        btn.onclick = function(){
            if(event&&event.stopPropagation){ // w3c标准，阻止冒泡事件
                event.stopPropagation();
            }else{ // IE系列 ie678
                event.cancelBubble = true;
            }
            alert('btn点击');
        }
        document.onclick = function(){
            alert('文档点击');
        }
    }
</script>

谁需要组织冒泡，就在对应的操作前，添加阻止冒泡事件

面试题-Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕获，成为目标阶段，事件冒泡

js中两种添加事件的方式

方式一：on+事件名
方法二：添加事件监听

1.方式一：on+事件名

// 添加事件关联
oneDiv.onclick = function() {
console.log("+++++");
}
oneDiv.onclick = function() {
console.log("-----");
}
// 取消事件关联
oneDiv.onclick = null;
oneDiv.onclick = false;

2.方法二：添加事件监听

语法1：element.addEventListener(event, function, useCapture)

Event：必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

Function：必须。指定要事件触发时执行的函数。

useCapture：可选。布尔值，(默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件)

// 添加事件关联
function fun1() {
	console.log("++++++");
}
function fun2() {
	console.log("-----");
}
oneDiv.addEventListener("click", fun1);
oneDiv.addEventListener("click", fun2);
oneDiv.addEventListener("click", function() {
	console.log('你好');
});

// 取消事件关联
oneDiv.removeEventListener("click", fun1);

3.addEventListener的兼容性

// 其他浏览器
oneDiv.addEventListener("click", fun1);
oneDiv.removeEventListener("onclick", fun1);

// IE 低版本浏览器
Ie浏览器中的on关键词不能少
oneDiv.attachEvent("onclick", fun1);
oneDiv.detachEvent("onclick", fun1);

4.阻止默认事件的发生

阻止事件传播: 使用的是事件对象的方法来阻止event.stopPropagation();

取消事件默认行为:

1, on+事件名和 attachEvent()

使用 return false;

2, addEventListener

使用 event.preventDefault();

事件封装

// 绑定事件 - 判断是否是ie浏览器
// obj-某个对象  EType - 某个事件  fun - fun函数
function addEvent(obj, EType, fun) {
  if (obj.addEventListener) {
  	obj.addEventListener(EType, fun);
  } else if (obj.attachEvent) {
  	obj.attachEvent("on" + EType, fun);
  } else {
  	obj["on" + EType] = fun;
  }
}

// 移除元素事件
function removeEvent(obj, EType, fun) {
  if (obj.removeEventListener) {
  	obj.removeEventListener(EType, fun);
  } else if (obj.detachEvent) {
  	obj.detachEvent("on" + EType, fun);
  } else {
  	obj["on" + EType] = null;
  }
}

// 取消默认行为
function preventDefaultFun(event) {
  if (event.preventDefault) {
  	event.preventDefault();
  } else {
  	event.returnValue = false;
  }
}

// 阻止事件传播
function stopPropagationFun(event) {
  if (event.stopPropagation) {
  	event.stopPropagation();
  } else {
  	event.cancelBubble = true;
  }
}

码农公寓