在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持.
原始事件模型:
在原始事件模型中(也有说DOM0级),事件发生后没有传播的概念,没有事件流。北大青鸟http://www.kmbdqn.com/认为事件发生,处理,结束,就这么简单。监听函数只是元素的一个属性值,通过指定元素的属性值来绑定监听器。书写方式有两种:
(1)HTML代码中指定属性值:
(2)在js代码中指定属性值:document.getElementsByTagName(‘input’)[0].onclick=func
优点:所有浏览器都兼容
缺点:
1.逻辑与显示没有分离
2.相同事件的监听函数只能绑定一个,后绑定的会覆盖掉前面的
3.无法通过事件的冒泡、委托等机制。
DOM2事件模型
此模型是W3C制定的标准模型。W3C制定的事件模型中,一次事件的发生包含三个过程:
(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数,若有则执行。
(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.
(3)事件冒泡阶段。事件从目标元素上升一直到达document,同样依次检查经过的节点是否注册了该事件的监听函数,有则执行。
所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。
e.target与e.currentTarget是干什么的?
e.target获取当前实际触发事件节点,e.currentTarget获取获取当前监听节点。
11111
$('div').on('click',function(e){console.log(e.currentTarget)console.log(e.target)})
如果点击span的输出:
li对象
span对象
点击li的非span区域,输出
li对象
li对象
preventDefault与stopPropagation是干什么的
你应该是做微信公众号开发的吧?官方接口上写的很清楚啊。首先访问后台得到相关参数,比如ADDID等等。然后就进行相应的处理就好了,用AJAX比较方便。下边是我自己项目的代码,给你参考下,一些内容我进行了删减:
$(function() {
$.ajax({
url : jsCtx + "xxx",
contentType : "application/x-www-form-urlencodedcharset=utf-8",
type : 'POST',
dataType : 'JSON',
async : false,
cache : false,
data : {
url:window.location.href//要传给后端本页面的路径
},
success : function(data) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.addid, // 必填,公众号的唯一标识
timestamp:data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature:data.signature,// 必填,签名,见附录1
jsApiList: ['onMenuShareAppMessage','error','onMenuShareTimeline','onMenuShareQQ','onMenuShareQZone','onMenuShareWeibo'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
}
})
})
wx.ready(function(){
//分享给朋友
wx.onMenuShareAppMessage({
title: ''
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
/*alert("分享成功")*/
},
cancel: function () {
/*alert("分享失败")*/
}
})
//报错处理
wx.error(function(res){
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
<aclass="share"
data-sharebox="true"
data-desc="desc"
data-title="title"
data-img="imgurl"
href="#">
分享按钮的onclick:
$(".share").attr('data-sharebox')
$(".share").attr('data-desc')
$(".share").attr('data-title')
$(".share").attr('data-img')
当然,建议a标签加一个id来唯一标识
如:
<a
class="share"
id="share_1"
data-sharebox="true"
data-desc="desc"
data-title="title"
data-img="imgurl"
href="#">
则下面就用:
$("#share_1").attr('data-sharebox')