js 函数执行事件

最新推荐文章于 2024-06-11 11:45:11 发布

qq_42438026

最新推荐文章于 2024-06-11 11:45:11 发布

阅读量513

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_42438026/article/details/104731461

版权

函数执行方式最基本的有三种

普通的函数调用
this 谁调用就指谁

		function test () {
             console.log(111);
             console.log(this);
         }
         test(); // this也是window, 表示默认是使用window调用
         window.test();

作为对象的方法调用

         var stu = {
             name : "张三",
             age : 23,
             play : function() {
                 console.log("打篮球");
                 console.log(this)
             }
         }
         stu.play();

      a. 在分析的时候, 不用去管函数或者方法是怎样声明的, 只需要看函数调用, 谁调用这个这个方法或者函数, 那么this就指向谁
       test = stu.play;
      
        test =  function() {
                console.log("打篮球");
                console.log(this)
            }
       
         test();
         window.test();

         b.
         stu.play = test;
         stu.play();

作位构造函数配合new关键字使用
this指向new关键字创建的对象

         function Person(name, age) {
             this.name = name;
             this.age = age;
             console.log(this);
         }
         new Person("zhangsan", 23);

      var obj = {
        name: "lisi",
        age: 23
      };

      function test() {
        console.log(111);
        console.log(this);
        // this = obj;// 报错
        console.log(this);
        
      }
      test();

注：
左值 : 就是指能够写在赋值运算符左边的值变量
右值 : 就是指能够写在赋值运算符右边的值
上述三种函数执行的方式缺点: 就是不能改变this指向

需求 : 必须要改变this指向, 怎么做?
call apply bind 函数的上下文调用模式

call ()
语法结构 : 函数名.call(this的新指向, 参数1, 参数2, …)

      function sum(n1, n2) {
          console.log(n1 + n2);
          console.log(this); // 我不让this指向window, 要让this指向obj
      }
         sum(15, 5)
         sum.call(obj, 14, 3)

apply()
语法结构 : 函数.apply(this的新指向, 参数数组或者伪数组) // 注意 : apply方法只有两个参数
sum.apply(obj, [16, 8])
bind()
语法结构 : 函数名.bind(this的新指向, 参数1, 参数2, …)
特点 : 不会指向这个要修改this指向的函数的函数, 而是返回已经修改了this指向的函数
bind不传参, 那么就在调用修改了this指向后的函数时传参, 但是如果两个都传了, 那么接受bind的参数
var fun = sum.bind(obj);
fun(15,8)
console.log(Array.prototype);

mouseover 和mouseenter的区别
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

阻止a标签的默认行为有哪几种方法
方法一
要阻止a标签跳转，可以改变href的值，直接写成“JavaScript：void(0)”即可阻止跳转；
或者将a标签href值写成“JavaScript：；”也可以阻止跳转

		方法二
		可以直接将onclick事件改成return pop()；
		或者在onclick事件内再加上return false；
		
		方法三
		先给a标签加上id，然后先用js获取a标签id，然后添加点击事件，在事件中加入 return false，即可阻止a标签跳转；

阻止事件的默认行为, 事件冒泡和事件捕获可以阻止吗? 怎么阻止?
stopPropagation这是阻止冒泡
event.preventDefault（）阻止默认行为

textContent,innerText,innerHTML区别

	<body>
		<style type="text/css">
			button{
				border: 1px solid red;
			}
		</style>
		<div class="contain">
			1
			<span>
				2
			</span>
			3
			<p>
				4
			</p>
		</div>
		<input type="button" name="" id="" class="bu" value="按钮" />
		<script type="text/javascript">
			var bu = document.getElementsByClassName("bu");
			bu.onclick = function(){
				console.log(event.type);
			}
			var container = document.querySelector("body");
			console.log("textContent的内容是:"+container.textContent);
			//通过textContent属性可以获取指定节点的文本，以及该指定节点所包含后代节点中文本内容，也包括<script>和<style>元素中的内容（这里的不是文本而是CSS样式代码和JavaScript代码）
    	    console.log("innerText的内容是:"+container.innerText);
    	    //IE引入了node.innerText属性，该属性会获取指定节点的文本以及后代节点中的文本，不能获取<style>和<script>中的内容。
    	    console.log("innerHTML的内容是:"+container.innerHTML);
    	    //innerHTML顾名思义就是获取指定元素内的HTML内容。

		</script>
	</body>

innerText 获取元素文本(包含子元素的文本) 但是innerText不是W3C的标准语法而是微软的自己的语法
火狐42版本以前的版本不支持
textContent 作用和innerText完全一致只是浏览器兼容性不同
textContent 是W3C的标准语法但是微软IE8及以前浏览器不支持

事件

事件绑定方式
1. 在DOM元素里面绑定使用on+事件类型 = function() {}
缺点 : 结构混合在一起
2. 在js里面进行绑定
现在js代码中获取元素, 使用点语法注册
缺点 : 就是不能重复注册同名事件, 否则就会覆盖, 默认冒泡
3. 使用事件监听的方式进行注册
addEventListener

// 事件对象
// 当用户触发某个事件的时候, 浏览器会捕捉到与触发事件相关的一些信息
// 获取事件对象 : 谷歌火狐 : e, ev, event, 但是在IE8及其以下版本浏览器里面, 不需要形参, 直接使用全局变量 window.event;
var box = document.getElementById("box");
box.onclick = function(e) {
    e = e || window.event;
    console.log(e);
    alert(123);
}

注：点语法注册事件的缺点 : 注册多个同名事件, 后者会覆盖前者
使用addEventListener来注册事件不会覆盖, 而是一次触发
@param type : 事件类型不要on (click mouseover mouseenter)
@param listener : 事件处理函数
@param 布尔类型默认是false, 不传时false
false表示冒泡 true表示捕获

IE8注册事件  不支持addEventListener  使用attachEvent()
	attachEvent只有两个参数
    @param type :事件类型 这里必须加on (onclick, onmouseover)
    @param listener : 事件处理函数

事件冒泡 : 当一个元素的事件被触发时, 这个元素所有的度元素的同名事件就会被依次触发
元素 --> 父元素 --> body --> html --> document --> window
事件冒泡一直存在只是我们以前没有给父元素注册同名事件

qq_42438026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 函数执行事件

函数执行方式最基本的有三种普通的函数调用this 谁调用就指谁 function test () { console.log(111); console.log(this); } test(); // this也是window, 表示默认是使用window调用 window....
复制链接

扫一扫