Chrome浏览器下调试和修改网页JavaScript
2018年01月17日


1、js来监控复制粘贴、js监听复制粘贴事件

参见:https://www.cnblogs.com/colima/p/8479310.html


2、移除页面上绑定的事件

实际案例:有些网站(例如CSDN)复制过来的代码后面加上了一下描述信息(作者、版权等信息),每次需要删除,怎么能保证我们粘贴的代码不携带这些信息呢?解决思路:

方法1、找到copy事件在哪里调用的,然后移除这个事件。

方法2、找到copy事件在哪个元素节点调用的,跳出这个节点再复制就不会触发copy事件。


扩展知识:js原生添加和移除事件的方法使用如下

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove', bodyScroll, false);
document.body.removeEventListener('touchmove', bodyScroll, false);

所以,要移除某个元素上的事件,首先要拿到事件原来的对象。

在chrome上拿到某个事件的listener对象,然后移除,示例如下:

//dom节点:
var dom = $('article.baidu_pl')[0]
//拿到 copy 事件(是一个数组)的listener对象:
var listener = getEventListeners(dom).copy[0].listener
//然后移除该事件:
dom.removeEventListener('copy', listener, false)
//写成一句就是:
$('article.baidu_pl')[0].removeEventListener('copy', getEventListeners($('article.baidu_pl')[0]).copy[0].listener,false)

参考资料:https://segmentfault.com/q/1010000016272581


3、查看页面上绑定的事件

在 Console(Chrome DevTools->Console) 执行如下代码即可:

getEventListeners(document) // 获取document上绑定的事件

getEventListeners($('article.baidu_pl')[0]) // 获取某个元素上绑定的事件,

getEventListeners($0) // 获取当前选中元素上绑定的事件(直接在Elements界面上选中想看的元素)


扩展知识:jQuery对象与DOM对象之间的转换

jQuery对象转成DOM对象: 

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); 

(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 

如:var $v =$("#v") ; //jQuery对象 

var v=$v[0];    //DOM对象 

alert(v.checked)   //检测这个checkbox是否被选中 


(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 

如:var $v=$("#v");  //jQuery对象 

var v=$v.get(0);   //DOM对象 

alert(v.checked)  //检测这个checkbox是否被选中 


DOM对象转成jQuery对象: 

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) 

如:var v=document.getElementById("v");  //DOM对象 

var $v=$(v);    //jQuery对象 

转换后,就可以任意使用jQuery的方法了。