js 动态获取，当前窗口中最后一个元素的id_框架

我是冲分来的^^，可以给个参考方案

获取页面所有p节点距文档左上角坐标，缓存起来

页面加载完成时或页面滚动时，通过坐标查找此时屏幕最底部的p节点

对此节点 *** 作

示例(刚写的，在chrome测试可用，兼容古董浏览器稍微改下代码)：

<!DOCTYPE html>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

(function(){

var list=[],elems=documentquerySelectorAll("p");

for(var i=0,y,elem;i<elemslength;i++){

elem=elems[i];

y=0;

do{

y+=elemoffsetTop;

if(elemnodeName!="BODY"){

y-=elemscrollTop;

};

}while(elem=elemoffsetParent);

listpush({elem:elems[i],y:y});

};

var prev;

function get(){

var top=documentbodyscrollTop

,height=documentdocumentElementclientHeight

,bottom=top+height;

for(var i=0,o;i<listlength;i++){

o=list[i];

if(oy>bottom){

break;

};

elem=oelem;

};

//此时elem为最底下可见元素,开搞了

prev&&(prevstyleborder="none");

prev=elem;

elemstyleborder="solid red 2px";

consolelog(elemid);

};

windowaddEventListener("load",get);

windowaddEventListener("scroll",get);

windowaddEventListener("resize",get);

})();

</script>

</body></html>

@see 鼠标点击拖拽的效果(页面可以同时拖动多个框)

@param boxId 整个对象(框)的id(一般为div或table)

@param event 内置对象(必须传入)

function mousePlead1(event, boxId) {

var o = getO(boxId);

var isIE = documentall true : false;

var e = event;

var x = eoffsetX || elayerX;

var y = eoffsetY || elayerY;

documentonmousemove = function(e) {

ostylefilter = 'Alpha(opacity=70)';

ostyleopacity = '07';

if (isIE) {

osetCapture();

} else {

windowcaptureEvents(EventMOUSEMOVE);

}

var e = windowevent || e;

if (eclientX - x >= 0 && eclientY - y >= 0 && eclientX - x <= getWinSize()[0] - getO(boxId)offsetWidth

&& eclientY - y <= getWinSize()[1] - getO(boxId)offsetHeight) {

ostyleleft = (eclientX - x) + "px";

ostyletop = (eclientY - y) + "px";

}

};

documentonmouseup = function(e) {

documentonmousemove = function() {

};

if (isIE) {

oreleaseCapture();

} else {

windowreleaseEvents(oMOUSEMOVE);

}

ostylefilter = "";

ostyleopacity = "";

};

}

@see 获得对象

@param id 对象的id(表单元素和其他标签都可以)

@return Object

function getO(id) {

return documentgetElementById(id);

}

@see 获得当前窗体的大小(width,height)

@return Array

function getWinSize() {

var width = parseInt(documentdocumentElementclientWidth);

var height = parseInt(documentdocumentElementclientHeight);

return new Array(width, height);

}

DOM0（属性绑定，兼容性好）：将一个函数赋值给一个事件处理属性

在dom上直接绑定事件（一个事件只能绑定一次），没有事件传播（事件一旦发生就立即调用句柄执行）。缺点：一个事件处理程序只能对应一个处理函数。

监听方法：

1在标签内写onclick事件

alert()中的this的值会变成全局(window)对象的引用（在严格模式中为 undefined）。

2在JS写onlicke=function（）{}函数

documentgetElementById("myButton")onclick = function () {

alert('thanks');

}

this的指向

用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，可以用this获取当前元素的属性。

$btnonclick=function(){alert('输出当前元素id：'thisid);}

删除DOM0事件处理程序，只要将对应事件属性置为null即可：

btnonclick = null；

DOM2：（函数绑定，兼容性不好）

采用addEventListener来注册事件，支持事件流的捕获过程和冒泡过程（注册事件的时候第三个参数控制）

只有一个监听方法，添加事件处理程序：addEventListener()，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

移除事件处理程序：removeEventListener()，不能移除匿名添加的函数。

它们都有三个参数：

第一个参数是事件名（如click）；

第二个参数是事件处理程序函数；

第三个参数表示是否在捕获时执行事件处理函数，默认为false表示在冒泡阶段调用。

和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this保存的同样是当前元素对象的引用。

注：

a) eventName的值均不含on，如注册鼠标点击事件eventName为click

b) 给EventListener传递一个（普通或者箭头）函数，则处理函数中的this指的是指当前dom元素；如果传递函数的引用，则this指全局对象，除非通过bind调用想要访问对应作用域对象：

elementaddEventListener('click', thisonclick2bind(this) ,false);

c) 通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现，这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡阶段触发句柄，所以attachEvent添加的事件都会被添加到冒泡阶段，并且要在事件前面加on（例如onclick）

documentgetElementById("myTest")attachEvent("onclick", function(){alert(1)});

//等价于

documentgetElementById("myTest")addEventListener("click", function(){alert(1)}, false);

只有DOM2级包含事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

<a></a>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

区别：

如果定义了两个dom0级事件，dom0级事件会覆盖；dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

dom2提供了一种更精细的手段控制listener的触发阶段（即可以选择捕获或者冒泡）

DOM3事件

DOM3级事件规定了一下几种事件：

UI事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或者失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行 *** 作时触发；

滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

文本事件，当在文档中，输入文本时触发；

键盘事件，当用户通过键盘在页面上执行 *** 作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动事件，当底层Dom结构发生变化时触发；

DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。

DOM中的事件模拟（自定义事件）

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建自定义事件可以由createEvent("CustomEvent")

返回的对象有一个initCustomEvent（）方法接收如下四个参数

1）type：字符串，触发的事件类型，自定义，例如 “keyDown”，“selectedChange”;

2）bubble（布尔值）：标示事件是否应该冒泡；

3）cancelable(布尔值)：标示事件是否可以取消；

4）detail（对象）：任意值，保存在event对象的detail属性中；

可以像分配其他事件一样在DOM中分派创建的自定义事件对象，如：

var div = documentgetElementById("myDiv");

EventUtiladdEventHandler(div,"myEvent", function () {

alert("div myEvent!");

});

EventUtiladdEventHandler(document,"myEvent",function(){

alert("document myEvent!");

});

if(documentimplementationhasFeature("CustomEvents","30")){

var e = documentcreateEvent("CustomEvent");

einitCustomEvent("myEvent",true,false,"hello world!");

divdispatchEvent(e);

}

这个例子中创建了一个冒泡事件myEvent，eventdetail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件。因为在initCustomEvent中设置了事件冒泡，所以当div激发该事件时，浏览器会将该事件冒泡到document。

写一个行内onclick，行外赋值onclick，和evenrlistener，怎么输出？

为什么一般在冒泡阶段，而不是在捕获阶段注册监听

答案

将html代码改为

其中加粗的this是相对你的代码增加的部分。

然后在你页面的js中写一个函数如下：

function test(element){

alert(elementid)

}

演示

我为此问题写了一个测试页面，可以在线测试代码。

这是演示页面的结构：

现在点击保存按钮

d出的提示就是按钮的ID

以上就是关于js 动态获取，当前窗口中最后一个元素的id全部的内容，包括:js 动态获取，当前窗口中最后一个元素的id、js怎样获取对象id值、DOM0 DOM2 addEventListener等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9588139.html

js 动态获取，当前窗口中最后一个元素的id

发表评论

评论列表（0条）