北大青鸟分享js代码事件机制识别

JavaScript011

北大青鸟分享js代码事件机制识别,第1张

在各种浏览器中存在三种事件模型:原始事件模型,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 () {

// 用户取消分享后执行的回调函数

}

})

<a

class="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')