JS与CSS那些特别小的知识点区别

Posted 2021-10-27 panrui1994

1：target与currentTarget的区别

currentTarget指向的事件绑定的元素，target指向的是你点击的元素

 

2:attr与jprop在jQuery在API当中的区别

2.1:首先要区分html标签与DOM元素对象的区别，页面加载以后，HTML标签在内存中都会对应一个DOM元素对象，他会将HTML标签固有的特性转化为对象属性，
2.2:所以对于标签中自定义的特性只能使用attr方法，其他的可以使用prop方法

 

3：pointer-events: none属性的使用

pointer-events: none顾名思义是鼠标事件失效，当处于父子关系当中时，我们应用在父元素的话，会直接透过父元素点击到子元素上面；当处于并列关系时，他会影响到绝对定位的层级关系。

 

4：color+border = border-color
很少人知道，定义了一个元素的文字颜色，意味着这个元素的边框颜色也被定义了

 

5:实际上垂直方向的排列计算是基于父元素的宽度而不是高度
在子元素设置margin-top,margin-bottom,padding-top,padding-bottom的时候，如果使用的是百分比计算，他实际上是相对于父元素的宽度进行计算的

 

6:oninput&onchange都是事件对象,当输入的值发生改变时触发事件
区别:
    oninput是在值改变时立即触发
    onchange是在值改变后失去焦点才触发
propertychange功能和oninput相同,用以替代oninput在IE9以下的不兼容性
    
$(‘#username‘).on(‘input propertychange‘, function() {  

    $(‘#result‘).html($(this).val().length + ‘ characters‘);  

})

 

7：this的指向问题 [this的取值取决于函数被调用时候,函数定义的时候是不能确定this的指向]
1构造函数当中的this
    如果函数做为构造函数使用,那么其实的this当然指向构造数来的对象

2函数作为一个对象的属性
    当函数作为一个对象的属性被调用时,this就指向调用该属性的对象

3当一个函数被call或者apply调用时
    this的值取决于传入的对象
    
4全局 & 调用普通函数时
    this都是指向window
    
5在构造函数的prototype的this
    Function.prototype.getName = function (){
        console.log(this)
    }
    this也指向构造数来的对象,整个原型链的this都指向当前对象的值

 

8：//call, apply, bind的简单区别
1：三者都可以改变函数体中this的指向
2：call传递的参数是依次[this,a,b,c]
3: apply传递是一个数组[this,[array]]
4: bind调用的方式和call比较像,但是bind返回值是一个新函数(改变了this的新函数),并且不会立即调用,而原函数的this不会改变