We Keep Coding

Something blocks addEventListener(type, handler) to work in DOM

I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)

As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});

Script didn't work on Firefox, 0 reaction on hover

I have a script that working perfectly on Chrome, but in Firefox there is no action after hovering linked object.
I tried to divide the script.js file for separate documents, but It won't help at all.
Here is the whole effect:
https://jsfiddle.net/lszewczyk45/9unawydo/9/
$(document).ready(function () {
const effect = new Effects('hover-effects');
effect.addEffect(document.querySelector('#cityEffect'), 'city', [ONMOUSEOVER]);
});
I think the problem is in calling the script - the lines at the end of the file, I pasted it above.

This is what FireFox says about your Javascript code:

I solve it, pasted in https://babeljs.io/, compile and change the js code.

Meteor won't run jQuery code

I'm trying to run a block of jQuery code that shows and hides a form, but can't find a way to get Meteor to run the code on the client side. Here's the code I'm attempting to use at the moment:
if (Meteor.isClient) {
Template.post.onRendered(function(){
$(document).ready(function(){
$('.replybtn').click(function(){
if( $(this).parent().next().css('display') === 'none' ){
$(this).parent().next().css('display', 'block');
} else {
$(this).parent().next().css('display', 'none');
}
});
});
});
}
I've also tried putting the code in a script tag, which did not work. Strangely, the jQuery portion of the code alone works fine when pasted into the browser console - meaning the bug is likely in how I'm running the code in Meteor, not the jQuery itself. Also, I've confirmed that the template name is correct and can't think of any other issues that could be causing this. Any ideas on why the jQuery code may not be running?

This is probably not the best solution, but it appears that this issue can be fixed by defining a function that creates the event listener and then setting a 2 second timeout to run the function with setTimeout().

You're trying to apply a traditional jQuery pattern when Meteor provides a simple facility to attach event handlers to templates. Here would be the meteoric way:
if (Meteor.isClient) {
Template.post.events({
'.replybtn click'(e){
const selector = e.target.parentElement.nextSibling;
selector.css('display', selector.css('display') === 'none'? 'block' : 'none');
}
});
});

What kind of protection could this be?

I was testing stuff in JSFiddle (with jQuery 1.9.0 included as an external ressource), and I basically had something like this in my HTML :
Hello world!
Under Chrome Inspector (v.35) / Script / index file, I spotted that AdBlock Plus (even toggled off) probably added these lines in my HTML's source :
<script>
(function () {
with(this[2]) {
with(this[1]) {
with(this[0]) {
return function (event) {
alert('Hello world!'); //Same as my onclick up there
};
}
}
}
})
</script>
I've never seen something like this, I guess it is meant to be a protection, but I can't figure what's its purpose.
What could do this code? Any guess?
Disclaimer : I'm sorry, I tried hard but I'm absolutely unable to reproduce this for the moment, apart for my own case...
Edit
I though it was impossible to reproduce even by opening my fiddle in another tab, but in fact, it seems to be possible. So, here's the fiddle, activate AdBlock plus, and here's how to see this :
Meanwhile, I'm trying to create a case where it's 100% reproductible, I'll post it here as soon as possible.

$().keyup in Greasemonkey

I have a Greasemonkey script which uses jQuery. jQuery works fine, for example I can run
$('input[name="captcha"]').attr('value', 'abcd');
and it works.
Also I can run
$('input[name="captcha"]').keyup(function(){
alert('');
});
in Firebug console and get the result. But in the Greasemonkey keyup doesn't seem to work at all. However document.onkeyup = function() { alert('')} also works well.
Any ideas how can I fix it or get similar functionality?

Oh, in fact I found how to get the same result. It's easy:
var captcha_field = $('input[name="captcha"]')[0];
captcha_field.addEventListener('keyup', function(){
alert('');
}, false);
(However would be nice to know is it how Greasemonkey is supposed to work or is it just a bug.)