js判断input是否为空根据结果触发相关事件

<form name='formn' id='formi'> // 表单的name属性必须有，并且唯一！！！

<input type="text" id="ti" name='tn' />

</form>

第一：过滤空格，添加String类的原型方法

Stringprototypetrims = function(){

    return thisreplace(/^\s|\s$/g,'');

};

第二：判断是否为空 (一般方法，只用一个input获取)

// documentgetElementById('ti')

if('' == documentquerySelector('#ti')valuetrims()){

    return;

}else{

    // TODO

}

第三：要求通过表单form获取 (根据form的name属性或id属性)

var f = documentgetElementById('formi')

var f = documentforms['formn']

var f = documentformn

// i是索引,表示当前document从上到下，从左到右第几个form

var f = documentforms[i] 

var f = documentnamedItem('formn')

var f = documentformsformn

好像是这6种方式获取，不知道是不是少了

接着就是获取input了

felements[i]// form里面第几个出现

ftn[i] 或者 ftn // 看tn是否重复出现

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document)ready(function(){})

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

而windowonload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document)ready要比windowonload先执行。

那么Jquery里面$(document)ready函数的内部是怎么实现的呢？下面我们就来看看：

我们来为document添加一个ready函数：

documentready = function (callback) {

///兼容FF,Google

if (documentaddEventListener) {

documentaddEventListener('DOMContentLoaded', function () {

documentremoveEventListener('DOMContentLoaded', argumentscallee, false);

callback();

}, false)

}

//兼容IE

else if (documentattachEvent) {

documentattachEvent('onreadytstatechange', function () {

if (documentreadyState == "complete") {

documentdetachEvent("onreadystatechange", argumentscallee);

callback();

}

})

}

else if (documentlastChild == documentbody) {

callback();

}

}

documentready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”：

windowonload = function () {

alert('onload');

};

documentready(function () {

alert('ready');

});

执行这段代码之后，你会看到浏览器里面会先d出“ready”,在d出onload。

windowonmousewheel = function(){  //触发滚轮事件

}

windowonscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟

var a = documentgetElementsByTagName("html")[0];

windowonmousemove = function(){

        //一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - eventclientX < 12){

aonmousedown = function(){

consolelog(1);

}

}else{

aonmousedown = null;

}

}

用jquery库写就更简单呀,如这样:12345$(function(){     $('div#libox li')mouseover(function(){alert($(this)find('span')html());});   })。

拓展：

1、 JS 即 JavaScript。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2、在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。

其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持

原始事件模型：

在原始事件模型中(也有说DOM0级)，事件发生后没有传播的概念，没有事件流。北大青鸟认为事件发生，处理，结束，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：

(1)HTML代码中指定属性值：

(2)在js代码中指定属性值：documentgetElementsByTagName(‘input’)[0]onclick=func

优点：所有浏览器都兼容

缺点：

1逻辑与显示没有分离

2相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的

3无法通过事件的冒泡、委托等机制。

DOM2事件模型

此模型是W3C制定的标准模型。W3C制定的事件模型中，一次事件的发生包含三个过程：

(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。

(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数

(3)事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。

etarget与ecurrentTarget是干什么的

etarget获取当前实际触发事件节点，ecurrentTarget获取获取当前监听节点。

11111

$('div')on('click',function(e){consolelog(ecurrentTarget);consolelog(etarget);})

如果点击span的输出：

li对象

span对象

点击li的非span区域，输出

li对象

li对象

preventDefault与stopPropagation是干什么的

<input type="button" value="a" onclick="bclick();" />

<input type="button" value="b" />

以上就是关于js判断input是否为空根据结果触发相关事件全部的内容，包括:js判断input是否为空根据结果触发相关事件、JS 页面加载触发事件 document.ready和onload的区别、js,鼠标上下滑轮或者拉动滚动条触发事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！